路由守卫的详解

路由守卫总共有7个

全局路由守卫:

beforeEach 前置守卫

affterEach 后置守卫

beforeResolve 解析守卫

路由的守卫

beforeRouterEnter 进入组件之前触发,在Created前面

beforeRouterUpdated 路由更新但是内容不会改变

beforeRouterLeave 离开之前触发,在beforeDestory之前触发

路由独享守卫

beforeEnter 读取路由的信息

一.进入一个页面路由所执行的钩子

代码：

路由的配置

import Vue from 'vue'
import VueRouter from 'vue-router'
import a from '@/views/a.vue'
import aa from '@/views/aa.vue'
import a3 from '@/views/a3.vue'
import af from '@/views/af.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: '首页',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ '../views/shouye.vue'),
    beforeEnter: (to, from, next) => {
      console.log('路由独享守卫beforeEnter')
      next()
    },
    children: [
      {
        path: '1/:id?',
        component: a,
        meta: {
          toLogin: true
        },
        xxx: false
      },
      {
        path: '/2/:id?', // ?代表参数值可传可不传，不写?一定要传
        component: aa,
        meta: {
          toLogin: true
        }
      },
      {
        path: '3',
        name: 'a3',
        component: a3
      },
      {
        path: 'f',
        name: 'af',
        component: af
      }
    ]
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
// 全局的前置守卫
router.beforeEach((to, from, next) => {
  console.log('前置路由守卫beforeEach')
  next()
})
// 后置路由守卫
router.afterEach((to, from, next) => {
  console.log('后置路由守卫affterEach')
  next()
})
// 全局的解析守卫
router.beforeResolve((to, from, next) => {
  console.log('全局解析守卫beforeResolve')
  next()
})

export default router

a页面的配置

beforeEach------------------->beforeEnter------------->beforeRouterEnter------------->beforeResolve-------->affterEach

进入前置守卫--------------->读取路由信息-------------->进入组件---------------->进行解析------------>

进入后置守卫。

viwe图：

 

 

二.全局的路由守卫所有组件都会经过。

全局的路由守卫:

beforeEach

affterEach

beoforeResolve

点击跳转:

 

 全局的只经过一次，

路由独享的守卫：

作用:主要是读取当前路由的信息。

组件的守卫：

 

beforeRouterEnter   进入组件之前。组件没创建在created之前 

beforeRouterUpdated  路由更新但是内容不会改变

beforeRouterLeave 离开组件之前，此时进入了组件，但是没离开

三.to ,next ,from

1.to 表示要去哪里

2.from  表示从哪里来

3.next  表示是否方向

例子:

next(false)  表示不能通过

next（‘/login’）表示跳转到登录页面

主要点,不写next()默认是通不过的，此时也不能进入页面。