Vue-router

简介：vue-router 是 vue 官方提供的一套 路由插件，能够帮我们实现单页面应用。

vue-router在项目中的使用

1. 安装 ： npm install --save vue-router
2. 在页面的某个位置放置一个 <router-view></router-view> ，用来切换路由页面；
3. 在 src 下面创建一个 router.js 文件。这个文件中去实例化 vue-router 的实例对象，并配置上路由的规则；
4. 需要在 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 。