vue2+vuex+vue-router 快速入门（四） vue-router 介绍

vue-router

　　前端路由在 HTML5 的 History API 未出现之前，一直采用 hash 值来实现。因为 hash 值的变动，浏览器并不会向后端发送一个新的请求。而我们的 js 代码却可以通过 onhashchange 和 window.location.hash来监听及获取到变化值。从而实现前端页面的变动。
　　vue.js 已经帮我们用组件拼装出应用（页面），借助 vue-router 我们就可以根据 URL 的值，在不同地点渲染不同的页面。

let router = new Router({    routes:[        {            path:"/foo",            component:Foo,        },        {            path:"/bar",            component:Bar        }    ]})new Vue({  el: '#app',  router,  template: '<App/>',  components: { App }})

App.vue

<template>    <div id="app" :class="skin">        <router-view></router-view>    </div></template>

这样，vue 会把根组件 App 渲染替换掉真实 DOM 中的 id=app 的元素。 而组件 Foo 和 Bar 被渲染替换根组件 App 中的 <router-view> 元素。当 url 为 /foo 的时候，渲染 Foo 组件，当 url 为/bar 的时候，渲染 Bar 组件。

动态路由匹配

　　我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 vue-router 的路由路径中使用『动态路径参数』（dynamic segment）来达到这个效果。
　　翻译上面一段话就是：如果我们想把参数也混入路由路劲里面，而又不影响路由的跳转应该怎么办？

routes:[        {            path:"/user/:id",            component:User,        }    ]

如上的模式，’/user/ID1938303’，’/user/ID818237271’ 都会被映射到 User 上。而 ‘ID1938303’ 会被保留到 $route.params 中。在 User 组件内部，通过 this.$route.params.id 即可访问。

嵌套路由

　　实际生活中的应用界面，通常由多层嵌套的组件组合而成。同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件，例如：

/user/foo/profile                    /user/foo/posts+------------------+                  +-----------------+| User             |                  | User            || +--------------+ |                  | +-------------+ || | Profile      | |  +------------>  | | Posts      | || |              | |                  | |            | || +--------------+ |                  | +-------------+ |+------------------+                  +-----------------+

vue-router 配置

routes:[        {            path:"/user/:id",            component:User,            children:[                {                    path:"profile",                    component:UserProfile                },                {                    path:"posts"                    component:UserPosts                }            ]        }    ]

要注意，以 / 开头的嵌套路径会被当作根路径，子路由只需指定路劲名字即可。可以通过多次嵌套 children 来实现多级嵌套路由。

此时基于上面的配置，当我们访问 /user/foo 的时候，并不会匹配任何子组件，这样会导致渲染地址为空（没有任何展示），我们可以通过提供一个 空 子路由来匹配这种情况。

routes:[        {            path:"/user/:id",            component:User,            children:[                {                    path:"",                    component:UserEmpty                }            ]        }    ]

导航触发

<router-link> 标签

　　我们可以通过在 template 中使用 <router-link> 来创建 a 来定义导航链接。

<div id="app">  <h1>Hello App!</h1>  <p>    <!-- 使用 router-link 组件来导航. -->    <!-- 通过传入 `to` 属性指定链接. -->    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->    <router-link to="/foo">Go to Foo</router-link>    <router-link to="/bar">Go to Bar</router-link>  </p>  <!-- 路由出口 -->  <!-- 路由匹配到的组件将渲染在这里 -->  <router-view></router-view></div>

router 实例

• router.push(location)
  想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。

this.$router.push('/path');// 带查询参数，变成 /register?plan=privaterouter.push({ path: 'register', query: { plan: 'private' }})

• router.replace(location)
  使用方式同 router.push 方法。只是把 history 栈中的当前记录替换为新记录。
• router.go(n)
  router.go 参数是一个整数，表示向前或向后几部。正向前，负向后。

导航钩子

　　vue-router 提供的导航钩子主要是用来拦截导航，也就是说，在进行跳转之前，我们可以先拦截下来。进行各种判断，是否继续、拒绝亦或者更改此跳转。这个一般配合权限控制使用。

全局钩子

　　所有的路由跳转都会被拦截。

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

每个钩子方法接收三个参数：

• to
  激将进入的目标路由对象
• from
  当前导航正要离开的路由
• next
  此操作会归还当前钩子对路由的拦截。
  
  • next() 进入下一个钩子，如果全部钩子执行完成，则正常跳转
  • next(false) 中断当前导航，URL 停留在 from 路由状态
  • next(‘path’) 跳转到另外一个地址。

局部钩子

　　你可以在路由配置上直接定义 beforeEnter 钩子：

const router = new VueRouter({  routes: [    {      path: '/foo',      component: Foo,      beforeEnter: (to, from, next) => {        // ...      }    }  ]})

此时这个钩子专属与这个组件，也就是说，from 路由对象固定为 ‘/foo’

参考文档：

vue教程
vue-loader教程
vuex教程