一，安装

1）npm install vue-router

2）如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能：

import Vue from 'vue'

import VueRouter from 'vue-router'

Vue.use(VueRouter)

如果使用全局的 script 标签，则无须如此（手动安装）。

二，使用

// 0. 如果使用模块化机制编程，導入Vue和VueRouter，要调用 Vue.use(VueRouter)// 1. 定义（路由）组件。// 可以从其他文件 import 进来const Foo = { template: '
     
      foo
     
' }const Bar = { template: '
     
      bar
     
' }// 2. 定义路由// 每个路由应该映射一个组件。const routes = [  { path: '/foo', component: Foo },  { path: '/bar', component: Bar }]// 3. 创建 router 实例，然后传 `routes` 配置const router = new VueRouter({  routes // （缩写）相当于 routes: routes})// 4. 创建和挂载根实例。// 记得要通过 router 配置参数注入路由，从而让整个应用都有路由功能const app = new Vue({  router}).$mount('#app')

//要在嵌套的出口中渲染组件，需要在 VueRouter 的参数中使用 children 配置const router = new VueRouter({    routes: [        {            path: '/',            redirect: '/main'//重定向         },

{            path: '/main',            component: MainView,            children: [                {                    path: '/main/visaindex',                    component: visaIndex                },                 {                    path: '/main/personal',                    component: Personal                }            ]        }     ]});

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

1）router.push(location)

这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。

当你点击 <router-link> 时，这个方法会在内部调用，所以说，点击 <router-link :to="..."> 等同于调用router.push(...)。

2）router.replace(location)

跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。

点击<router-link :to="..." replace>等同于调用router.replace(...)。

3）router.go(n)

这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步。

4）『导航』表示路由正在发生改变。vue-router 提供的导航钩子主要用来拦截导航，让它完成跳转或取消。

//使用 router.beforeEach 注册一个全局的 before 钩子

router.beforeEach(function(to, from, next) {

next();//确保要调用 next 方法，否则钩子就不会被 resolved。

})

当一个导航触发时，全局的 before 钩子按照创建顺序调用。每个钩子方法接收三个参数：

1）to: Route: 即将要进入的目标 路由对象

2）from: Route: 当前导航正要离开的路由

3）next: Function: 一定要调用该方法来resolve这个钩子。

 //注册一个全局的 after 钩子

router.afterEach(function(route) {

//...

})