简介：vue-router 是 vue 官方提供的一套 路由插件，能够帮我们实现单页面应用。
vue-router在项目中的使用
- 安装 ： npm install --save vue-router
- 在页面的某个位置放置一个 <router-view></router-view> ，用来切换路由页面；
- 在 src 下面创建一个 router.js 文件。这个文件中去实例化 vue-router 的实例对象，并配置上路由的规则；
- 需要在 main.js 中，new Vue() 的地方，配置一个 router 选项，选项的值，就是第 3 步中暴露出来的路由的实例
简单实现一个单页面路由配置
// 1. 引入 vue
import Vue from 'vue'
// 2. 引入 vue-router
import VueRouter from 'vue-router'
// 3. 引入需要用到的路由页面组件
import PageA from './views/PageA.vue'
import PageB from './views/PageB.vue'
// 4. vue-router 是 vue 的插件，需要使用 Vue.use() 方法去调用插件
Vue.use(VueRouter)
// 5. 定义路由规则 routes
const routes = [
{
path: '/a',
component: PageA
},
{
path: '/b',
component: PageB
}
]
// 6. 实例化 vue-router
const router = new VueRouter({
routes: routes
})
// 7. 暴露 实例对象
export default router
动态路由：
使用原由：有些页面要实现不同数据相同页面渲染（例如商品详情页），这时候就需要动态路由参数来渲染页面。
const User = {
template: '<div>User</div>'}
const router = new VueRouter({
routes: [
// 动态路径参数 以冒号开头
{ path: '/user/:id', component: User }
]})
- 这里路由冒号后面跟想要传递过去的数据，详情页面使用 this.$route.params 来获取传递过来的参数;
- 也可以传递多个参数 例如：/user/:username/post/:post_id 也是使用 this.$route.params 来获取传递过来的参数。
监听路由组件发生变化
以往常会发生这样一个问题，一个商品详情页通过url 跳转到另一个商品详情页的时候有时会发生当前页面被缓存，导致跳转过后页面没变化，这样就要通过监听路由变化来解决这个问题。
- 第一种方法：通过watch来监听路由发生变化。
const User = {
template: '...',
watch: {
'$route' (to, from) {
// 对路由变化作出响应...
}
}}
- 第二种方法：使用导航守卫 beforeRouteUpdate。
const User = {
template: '...',
beforeRouteUpdate (to, from, next) {
// react to route changes...
// don't forget to call next()
}}
编程式导航
由于路由之间需要发生页面跳转，使用编程式导航可以做到路由页面改变，页面不刷新。
使用 js 方式进行页面跳转
- $router.push() 普通 router-link 的跳转
- $router.replace() 重定向跳转
- $router.back() 后退
- $router.forward() 前进
- $router.go() 前进或后退 go(-1)
$route
当我们在vue项目中使用了 vue-router 。这时，当前项目的每一个vue组件，都会自动获取到一个 $route 数据。这个数据中存放的是匹配当前路由的信息对象。
可以通过它，得到当前的动态路由参数 Params 或 查询参数 Query 。
