19/3/31學習筆記

vue-router
1 router-link 導航到不一樣組件
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
定義路由
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
當 <router-link> 對應的路由匹配成功，將自動設置 class 屬性值 .router-link-active

2 動態路由匹配
routes: [

// 動態路徑參數 以冒號開頭
{ path: '/user/:id', component: User }

]
3 嵌套路由 ，在組件中還包含多個子組件且存在路由跳轉
routes: [

{ path: '/user/:id', component: User,
  children: [
    {
      // 當 /user/:id/profile 匹配成功，
      // UserProfile 會被渲染在 User 的 <router-view> 中
      path: 'profile',
      component: UserProfile
    },
    {
      // 當 /user/:id/posts 匹配成功
      // UserPosts 會被渲染在 User 的 <router-view> 中
      path: 'posts',
      component: UserPosts
    }
  ]
}

]

4 編程式導航
除了能夠經過<router-link to: >跳轉，還能夠經過 this.$router.push() 的方式跳轉（注意path的方式，params不能生效）
// 字符串
router.push('home')

// 對象
router.push({ path: 'home' })

// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})

// 帶查詢參數，變成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
注意：若是提供了 path，params 會被忽略，上述例子中的 query 並不屬於這種狀況。取而代之的是下面例子的作法，你須要提供路由的 name 或手寫完整的帶有參數的 path：
const userId = '123'
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: /user/${userId} }) // -> /user/123
// 這裏的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user

this.$router.replace()
router.replace(location, onComplete?, onAbort?)
跟 router.push 很像，惟一的不一樣就是，它不會向 history 添加新記錄，而是跟它的方法名同樣 —— 替換掉當前的 history 記錄。

5 重定向

重定向

重定向也是經過 routes 配置來完成，下面例子是從 /a 重定向到 /b：

const router = new VueRouter({
routes: [

{ path: '/a', redirect: '/b' }

]
})
重定向的目標也能夠是一個命名的路由：

const router = new VueRouter({
routes: [

{ path: '/a', redirect: { name: 'foo' }}

]
})

6 導航守衛
全局前置守衛
你能夠使用 router.beforeEach 註冊一個全局前置守衛：

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
// ...
})

完整的導航解析流程
導航被觸發。
在失活的組件裏調用離開守衛。
調用全局的 beforeEach 守衛。
在重用的組件裏調用 beforeRouteUpdate 守衛 (2.2+)。
在路由配置裏調用 beforeEnter。
解析異步路由組件。
在被激活的組件裏調用 beforeRouteEnter。
調用全局的 beforeResolve 守衛 (2.5+)。
導航被確認。
調用全局的 afterEach 鉤子。
觸發 DOM 更新。
用建立好的實例調用 beforeRouteEnter 守衛中傳給 next 的回調函數。

7 路由元信息
定義路由的時候能夠配置 meta 字段：

const router = new VueRouter({
routes: [

{
  path: '/foo',
  component: Foo,
  children: [
    {
      path: 'bar',
      component: Bar,
      // a meta field
      meta: { requiresAuth: true }
    }
  ]
}

]})