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 }
    }
  ]
}

]
})