一.先介绍一下路由的七大守卫

1.全局守卫

(1)beforeEach 前置守卫进入路由之前候触发

(2)beforeResolve 解析守卫解析路由的时候触发

(3)beforeafterEach 后置守卫进入路由后触发

2.路由独享守卫

beforeEnter 路由独享守卫路由独自享有的守卫

3.组件内的守卫

(1)beforeRouterEnter 进入路由前触发

(2)beforeRouteUpdate 动态路由的参数路径发生变化的时候

(3)beforeRouteLeave 路由离开的时候触发 :从A--->B就会触发

4.上述路由的参数的介绍:

1.总共有三个参数:

(1) to:到哪里去

（2）from:从哪里来

(3) next:表示是否通过

2.代码演示:

router.beforeEach((to, from, next) => {
  if (to.path === '/a3') {
    alert('请先登录在访问')
    next(false)
  } else {
    next()
  }
})

解析;这句话的意思是如果去的是a3路径对应的页面，给出一个弹出要求请先登录在访问, next(false)禁止跳转，如果不是访问a3路径对应的页面那么就允许访问。

5.全局路由的执行顺序。

1.代码验证;

router.beforeEach((to, from, next) => {
  console.log('全局前置守卫11111111111111111111111')
  next()
})
router.beforeResolve((to, from, next) => {
  console.log('全局解析守卫2222222222222222222222')
  next()
})
router.afterEach((to, from, next) => {
  console.log('全局后置守卫33333333333333')
})

图例:

得出结论:

在全局里面执行顺序是:

前置守卫>全局解析守卫>后置守卫

6. 不同组件之间的路由跳转流程图

导航被触发（A–>B）
调用A组件内路由守卫beforeRouteLeave(to,from,next)
调用全局路由前置守卫router.beforeEach(to,from,next)
调用B路由独享守卫 beforeEnter(to,from.next)
解析异步路由组件B
调用B的组件内路由守卫beforeRouteEnter(to,from,next)
调用全局路由解析守卫 router.beforeResolve(to,from,next)
导航被确认
调用全局路由钩子router.afterEach(to,from)
渲染B组件DOM

图示:

解析;从A组件-------->B组件的过程，离开A组件调用了组件内的守卫beforeRouterLeave，进入B组件开启全局的前置守卫,beforeEach, 在开启路由独享守卫beforeEnter ，然后再调用B组件内的beforeRouterEnter, 全局的解析守卫, 后置守卫。

7.路由的传参编程式传参（params query）

(1)通过name属性来出传递参数

index.JS文件

  {
        path: 'a2',
        name: 'a2',
        component: () => import('../views/a2.vue')
      }

触发:

 this.$router.push({ name: 'a2', params: { userId: 123 } })

接收:

{
   
   { $route.params.userId }}

注意点;是$route,不是router，userId是参数名字。

(2)通过在后面拼接参数进行查找

index.JS文件下

     {
        // name是参数名
        path: '/a2/:name',
        name: 'a2',
        component: () => import('../views/a2.vue')
      }

解析:path路径上 name代表是参数的名字

跳转的页面:

<template>
  <div class="">
    <button @click="fn">点击跳转到a2页面</button>

    <router-view></router-view>
  </div>
</template>

  methods: {
    fn () {
      this.$router.push('/a2/' + '张三')
    }
  }

解析: 点击按钮跳转页面并且传递值'张三'过去

接收:

{
   
   { $route.params.name }}

(3)通过query来接收的传参

    <button @click="fn">点击跳转到a2页面</button>
  
    methods: {
    fn () {
      this.$router.push('/a2?name=zs&age=20')
    }
  }

解析:在a2对应的组件中传递了2个参数分别是name=zs ,age=20。

接收的页面:

    <h1>{
   
   { $route.query.name }}</h1>
    <h2>{
   
   { $route.query.age }}</h2>

通过query来接收传递过来的参数,注意$route.query.参数名。

路由的守卫和路由之前的传参