vue-router -- 基本配置

基礎的完整sample（戳這裏）

對路由參數的變化做出響應的話，你能夠簡單地 watch（監測變化） $route 對象：

const User = {
  template: '...',
  watch: {
    '$route' (to, from) {
      // 對路由變化做出響應...
    }
  }
}

編程式的vue-router操做：

1. router.push(location)
2. router.replace(location)
3. router.go(n)

命名路由 在routes數組配置中添加name鍵值對，

// 參數配置
const router = new VueRouter({
  routes: [
    {
      path: '/user/:userId',
      name: 'user',
      component: User
    }
  ]
})
// 連接到該路由的方法
// 1.<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
// 2.router.push({ name: 'user', params: { userId: 123 }})

命名視圖 同時（同級）展現多個視圖時候，如sidebar header main ……，咱們須要同級路由，請注意下面是components（不是component）參數

// template 定義
<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>

// routes參數定義
const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
    }
  ]
})

重定向 _redirect_參數在routes配置中可接受爲字符串、命名對象、「to」函數，詳情請戳這裏

別名 _alias_更像是說假路由，URL變成了alias配置的值，可是視圖仍是path對應的component

mode 兩種模式： _hash _和 history