路由守卫.png

路由守卫

全局守卫

在每一个路由跳转时都会执行。
from:从哪来,
to:到哪去，
next:我允许了才能真的去
举个栗子:从根页面/到/about页面去。

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
router.beforeEach((to, from, next) => {
    console.log('从哪来',from);
    console.log('到哪去',to);
    console.log('全局beforeEach');
    next();
});
router.beforeResolve((to, from, next) => {
    console.log('全局beforeResolve');
    next();
});
router.afterEach((to,from) => {
    console.log('全局afterEach');
});
createApp(App).use(router).mount('#app')

next():准了，想去就去吧。
next(false):给爷爬，哪都不准去!。
next({path:'/'}):爷不管你去哪，都给爷去根页面.

router.beforeEach

跳转前,组件未初始化

router.beforeResolve

组件被解析后（即beforeRouteEnter(不可以调用this)或beforeRouteUpdate(可以调用this)后）

router.afterEach

跳转后

局部路由守卫

beforeEnter

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    beforeEnter: (to, from, next) => { 
      console.log('局部beforeEnter');
      next()
    }
  },
  ]

组件守卫

export default {
 beforeRouteEnter(to, from, next) {
    console.log('组件beforeRouteEnter');
    next()
  },
  beforeRouteUpdate(tp, from, next) {
    console.log('组件beforeRouteUpdate')
    next()
  },
  beforeRouteLeave(to, from, next) {
    console.log('组件beforeRouteLeave')
    next()
  }
  }

beforeRouteEnter

进入组件时
beforeRouteUpdate

更新当前组件时(当前组件复用时触发,比如query和params参数改变时)

beforeRouteLeave

离开当前组件时

顺序

//main.js
router.beforeEach((to, from, next) => {
    console.log('全局beforeEach');
    next()
});
router.beforeResolve((to, from, next) => {
    console.log('全局beforeResolve');
    next();
});
router.afterEach(() => {
    console.log('全局afterEach');
});

//index.js
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    beforeEnter: (to, from, next) => { 
      console.log('局部beforeEnter');
      next()
    }
  },
  {
    path: '/about',
    name: 'About',
    beforeEnter: (to, from, next) => { 
      console.log('局部beforeEnter');
      next()
    },
    ]

//About.vue 和 Home.vue
  beforeRouteEnter(to, from, next) {
    console.log('组件beforeRouteEnter');
    next()
  },
  beforeRouteUpdate(tp, from, next) {
    console.log('组件beforeRouteUpdate')
    next()
  },
  beforeRouteLeave(to, from, next) {
    console.log('组件beforeRouteLeave')
    next()
  }

初次进入页面

跳转其他页面

跳转至本页面(query或params参数改变时)

本菜鸡的小总结，如有错误欢迎斧正。

Vue的路由守卫