Vue Router

使用前，需要先安装路由。安装方法：https://router.vuejs.org/zh/installation.html

路由配置方法：
在router文件下的index.js中导入

import Index from '@/pages/Index'
import Details from '@/pages/Details'
import Routers from '@/pages/Router'

Vue.use(Router)

export default new Router({
 routes: [
    {
      path: '/',
      name: 'Index',
      component: Index
    },
   {
      path: '/details',
      name: 'Details',
      component: Details
    },
  {
      path: '/router',
      name: 'Routers',
      component: Routers
    },
})

路由跳转

使用 router-link 标签，通过 to 绑定。
如在Router.vue中，写入如下代码：

<router-link to="/">首页</router-link>
<router-link to="/details">查看详情</router-link>

被解析为a标签，如下图所示：

被解析后的标签

如点击首页后：

首页，index组件

动态路由匹配

路由参数变化

假设我们一个Details组件页面中都是文章列表，每个文章都可以点击查看详情，那每个不同的文章有不同的详情地址，这是我们便需要使用“动态路径参数”。

export default new Router({
 routes: [
   {
      // 动态路径参数 以冒号开头
      path: '/details/:id',
      name: 'Details',
      component: Details
    },
})

获取方式：this.$route.params.id或this.$route.query.id

1、this.$route.params.id

<template>
  <div class="box">
    <router-link to="/">首页</router-link>
    <p @click="goDetails('1')">查看详情</p>
    <!--<router-link to="/details/1">查看详情</router-link>-->
  </div>
</template>

<script>
export default {
  name: 'Router',
  data () {
    return {}
  },
  methods: {
    goDetails (id) {
      this.$router.push({
        name: 'Details',
        params: {
          id: id
        }
      })
    },
  }
}
</script>

点击查看详情后

2、this.$route.query.id

<template>
  <div class="box">
    <router-link to="/">首页</router-link>
    <p @click="goDetails('1')">查看详情</p>
    <!--<router-link to="/details/1">查看详情</router-link>-->
  </div>
</template>

<script>
export default {
  name: 'Router',
  data () {
    return {}
  },
  methods: {
    goDetails (id) {
      this.$router.push({
        path: '/details',
        query: {
          id: id
        }
      })
    },
  }
}
</script>

同样点击查看效果后：

this.$route.params.id与 this.$route.query.id的不同为使用query最后出现的形式为?id=

所有路径匹配

export default new Router({
 routes: [{
      path: '*'
    }]
})

可以代表所有路径。
使用场景：当出现任意意外情况404页面时，便可匹配此路径。

优先级

同一个路径可以匹配多个路由，匹配的优先级就按照路由的定义顺序：谁先定义的，谁的优先级就最高。

导航守卫

用于通过跳转或取消的方式守卫导航。

全局守卫：是指路由实例上直接操作的钩子函数，特点是所有路由配置的组件都会触发，直白点就是触发路由就会触发这些钩子函数

• beforeEach（to，from， next）
• beforeResolve（to，from， next）
• afterEach（to，from）

路由守卫： 是指在单个路由配置的时候也可以设置的钩子函数

• beforeEnter（to，from， next）

组件守卫：是指在组件内执行的钩子函数，类似于组件内的生命周期，相当于为配置路由的组件添加的生命周期钩子函数。

• beforeRouterEnter（to，from， next）
• beforeRouterUpdadte（to，from， next）
• beforeRouterLeave（to，from， next）

参数
to：即将要进入的目标路由对象；
from：即将要离开的路由对象；
next：涉及到next参数的钩子函数，必须调用next()方法来resolve这个钩子，否则路由会中断在这，不会继续往下执行
next()：进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是confirmed(确认的)。
next( false )中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到from路由对应的地址。
next( ' / ')或者next({ paht：' / ' })：跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。可传递的参数可以是router-link标签中的to属性参数或router.push中的选项
next( error )：如果传入next的参数是一个Error实例，则导航会被终止且该错误会被传递给router.onError()注册过的回调。