一、router-link及router-view

：用来做导航，通过传入to属性来指定链接

：用来做路由出口，路由匹配到的组件都会渲染在这里

const router = new VueRouter({    routes //相当于routes: routes})// 将router配置注入路由从而让整个应用具有路由功能new Vue({  router,  store,  render: h => h(App)}).$mount("#app");

我们可以通过this.$router来访问路由器，然后通过this.$route来访问当前路由。

二、动态路由标记

1.作用

动态路由标记的多个不同的路由映射到同一个组件。路由中需要夹杂路由参数，例如/user/:id，冒号是路由参数的标志。当匹配到一个路径的时候，参数值会被设置到this.$route.params，可以在每个组件内使用。

2.响应路由参数的变化

当使用路由参数，即动态路由的时候，因为这时候不同的路由映射的是同一个组件，那么这个组件将会被复用，而不是销毁后再创建，这也意味着组件的生命周期钩子将不会被调用

但是某些时候，我们复用组件的时候，可能想对路由参数的变化做出响应，可以简单地监测（watch）$route对象或者使用2.2版本中引入的beforeRouteUpdate导航守卫。导航守卫类似method属性，直接在对象中当做属性加入。当然路径中也可以使用通配符，路由中使用了，那么$route.params内部会自动添加一个参数pathMatch，它包含了URL通过通配符被匹配的部分。

三、嵌套路由

实际项目中的页面，通常是通过多个嵌套的组件组成。所以顶层组件就渲染最高级出口，当然某个组件内也拥有自己的

    
  
     
    
// User组件const User = {  template: '
    
     User {
   { $route.params.id }}
    
'}// routerconst router = new VueRouter({  routes: [    { path: '/user/:id', component: User }  ]})// User组件内部加入
    const User = {  template: `    
    
      
     
User {
   { $route.params.id }}
      
         
    
  `}// 想在嵌套的出口中渲染组件，需要在VueRouter的参数中配置childrenconst router = new VueRouter({  routes: [    { path: '/user/:id', component: User,      children: [        {          // 当 /user/:id/profile 匹配成功，          // UserProfile 会被渲染在 User 的 
    
      中          path: 'profil9e',          component: UserProfile        },        {          // 当 /user/:id/posts 匹配成功          // UserPosts 会被渲染在 User 的 
     
       中          path: 'posts',          component: UserPosts        }      ]    }  ]})// 当只访问"/user/foo"时，没有匹配任何路由，所以User内部的
      不会渲染什么，所以这时候需要创建一个空路径，并映射到一个组件。{    path:" ",    component: UserHome}
     
    

四、编程式的导航

除了使用创建a标签来定义导航链接。我们还可以借助router的实例方法，来通过编程实现。

主要的编程实现方法有：

• router.push(location,?onComplete,?onAbort)
• router.replace(location,?onComplete,?onAbort)

• router.go(n)

  1.router.push

  使用router.push方法，会向history栈中添加一个新的记录。当用户点击浏览器的前进后退按钮时，会导航到相应的url。

  当你点击中的a标签时，相当于执行router.push方法。

  1.1此方法的参数：location，onComplete，onAbort

• location：这个参数可以直接使用字符串路径或者一个描述地址的对象

router.push('home')router.push({path:'home'})router.push({name:'user', params: {userId: '123'}})router.push({path:'register', query: {id: '34'}}) //带查询参数，变为"/register?id=34"

注意：如果提供了path，那么params会被忽略，上述例子query不属于这种情况。如果想提供参数params，那么可以使用name，不能使用path，因为params在path存在情况下都会失效。如果要使用path，还想加入参数，那么必须手写完整的带参数的path。

const userId = '123'router.push({ name: 'user', params: { userId }}) // -> /user/123router.push({ path: `/user/${userId}` }) // -> /user/123// 这里的 params 不生效router.push({ path: '/user', params: { userId }}) // -> /user

同样的规则同样适用于router-link的to属性。

在 2.2.0+，可选的在 router.push 或 router.replace 中提供 onComplete 和 onAbort 回调作为第二个和第三个参数。这些回调将会在导航成功完成 (在所有的异步钩子被解析之后) 或终止 (导航到相同的路由、或在当前导航完成之前导航到另一个不同的路由) 的时候进行相应的调用

2.router.replace(location,?onComplete,?onAbort)

跟router.push功能类似，唯一的区别是它不会向history栈中添加一个记录，而是去替换history栈中的当前记录。

3.router.go(n)

n是一个整数，n为正整数时，表示向前跳转n步，相反向后跳转n步，超出history栈中的记录时，跳转失效。

五、命名路由

即对VueRouter配置中的routes中的某个路由对象添加name属性，使其成为带有名字的路由。

当你需要链接到一个路由，则需要对中的to赋值一个对象。

const router = new VueRouter({  routes: [    {      path: '/user/:userId',      name: 'user',      component: User    }  ]})
    
     User
    

上述代码和router.push({ name: 'user', params: { userId: 123 }})作用类似。

六、命名视图

有时候想同级展示多个视图，而不是嵌套展示。一个路由下想展示多个视图，则需要多个组件。

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

七、重定向和别名

const router = new VueRouter({  routes: [    { path: '/a', redirect: '/b' }  ]})