vue-router是vue官方指定的路由库，让我们来撸一遍vue-router的基本概念吧！

安装

我是以直接下载的方式来引入vue-router的。

<script src="./lib/vue-router.js"></script>

使用vue-router

定义路由

const routes = [// 这里定义一个最基础的路由{ path: '/b', component: ComponentB }// 动态路由{ path: '/user/:id', component: User }// 命名路由{ path: '/user/:id', name: user, component: User }
];

创建 router 实例

const router = new VueRouter({routes // （缩写）相当于 routes: routes
})

vue实例注入路由

通过 router 配置参数注入路由。

var app = new Vue({el: '#app',router: router,......
})

通过注入路由器，我们可以在任何组件内通过 this.$router 访问路由器，也可以通过 this.$route 访问当前路由。

使用路由出口

<!-- 路由出口，与angular的router-outlet类似 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>

路由跳转

router-link

通过router-link组件，我们可以进行路由的跳转。to属性的写法很多，请参考router-link。

<router-link to="/b">Component B</router-link>
<router-link :to="{ path: '/c' }">Component C</router-link>

编程式路由

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

该方法的参数location可以是一个字符串路径，或者一个描述地址的对象。用法如下：

router.push('b');
router.push({path: 'b'})
router.push({path: 'user/1'})
router.push({name: 'user', params: {id: 1}})

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

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

router.replace(...)

ps：你也可以在router-link使用replace。

<router-link :to="..." replace>

router.go(n)

类似 window.history.go(n)。是history回退和前进的操作。

了解了上述几个点后，你基本上可以完成基本的路由功能了。

嵌套路由

一个组件内部也可以有路由视图router-view。

<div><p>FatherComponent Content</p><router-view></router-view>
</div>

于此同时需要在路由定义处添加children属性。也是类似嵌套的写法。

{path: '/father',component: FatherComponent,children: [{ path: 'child', component: ChildComponent }]
}

命名视图

当我们的布局是由几部分组成时，并且我们希望每一部分都有自己的路由，那么此时就不是嵌套路由了，而是多路由视图，这个时候我们就需要用到命名视图了。

<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>

而在定义路由的时候也要对应好。

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

用watch监测路由

很多时候我们可能需要监测路由变化，那么需要在watch中监测’$route’，方法大体是’$route’ (to, from) {your code}

watch: {'$route': function (to, from) {this.fromRoute = from.path;this.toRoute = to.path;// 可以根据情况做一些后续的逻辑处理......}
}

路由重定向

重定向的意思就是本来是要跳路由A的，但是定向到B。写法如下：

routes: [{ path: '/b', component: ComponentB },// redirect为path的形式{ path: '/a', redirect: '/b' },// redirect为name的形式{ path: '/a', redirect: { name: 'compB'} },// 甚至是一个方法，动态返回重定向目标，这样我感觉都可以做路由守卫了。{ path: '/a', redirect: to => {// 方法接收 目标路由 作为参数// return 重定向的 字符串路径/路径对象}}
]

路由别名

routes: [{ path: '/a', component: A, alias: '/b' }
]

alias的意思是别名，通俗讲，你大名是张三，别人叫你阿三，你也答应了，阿三就是你的别名。反映到路由上就是说，b是a的别名，那我输入路由b，地址栏会显示b，但也会映射到A组件；如果输入a，那地址栏就还是a，组件也是A，没什么变化。

向路由组件传递props

在组件中使用 $route 会使之与其对应路由形成高度耦合，我们可以使用props的形式来重新定义。这样id就会作为一个prop属性，用来接收传递的数据。

// 路由定义
routes: [{ name:'employee', path: '/employee/:id', component: Employee, props: true}
]
// 组件定义
const Employee = Vue.component('Employee', {props: ['id'],template: '<p>I am worker {{id}}</p>'
});

路由守卫

通过跳转或取消的方式守卫路由。

全局守卫

使用router.beforeEach注册全局的路由守卫：

router.beforeEach(function(to, from, next) {console.log('GLOBAL_beforeEach');if (to.path === '/my') {next(false);alert('You are not registered...');} else {next();}
});

next：一定要调用该方法来 resolve 这个钩子

• next(): 进行管道中的下一个钩子。
• next(false): 中断当前的导航。
• next(’/’) 或者 next({ path: ‘/’ }): 跳转到一个不同的地址。也可以传params的。

路由独享的守卫

利用beforeEnter钩子实现。

const routes = [{name:'user',path: '/user/:id',component: User,beforeEnter: function (to, from, next) {console.log('ROUTE_beforeEnter');next(false);}}
]

组件内的守卫

可以利用beforeRouteEnter，beforeRouteUpdate，beforeRouteLeave几个钩子来定义守卫。

• beforeRouteEnter用于拦截进入组件的情形。
• beforeRouteUpdate用于当前路由改变，但是该组件被复用的情况，如/user/1 和 /user/2 之间跳转的时候。
• beforeRouteLeave用于拦截离开组件的情形。

路由transition

router-view是基本的动态组件，所以我们可以用 transition组件给它添加一些过渡效果。

<transition name="slide"><router-view></router-view>
</transition>

路由切换时记住滚动的位置

创建 Router 实例时，指定scrollBehavior属性。

const router = new VueRouter({routes: [...],scrollBehavior (to, from, savedPosition) {// 第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的前进/后退 按钮触发) 时才可用。if (savedPosition) {return savedPosition} else {return { x: 0, y: 0 }}}
})

更多功能实现请参考vue-router文档。