vue导航守卫(路由守卫)代码实现（vue3.0路由守卫）

一 路由入口文件index.js

import Vue from 'vue'
import Router from 'vue-router' // 1.导入路由插件
import login from '@/view/routerDefence/login'
import home from '@/view/routerDefence/home'
import about from '@/view/routerDefence/about'
Vue.use(Router) // 2.vue使用router插件
// https://juejin.cn/post/6844903912340717575
// 解决报错：Navigation cancelled from“/...“ to “/...“ with a new navigation start
const originalPush = Router.prototype.push
Router.prototype.push = function push (location) {
return originalPush.call(this, location).catch((err) => err)
}
// end
const router = new Router({ // 3.导出router实例，其中把路由和 组件的映射关系注入到实例中
routes: [ // 4.下边的每一个对象是映射关系
{
path: '/',
name: 'login',
component: login
},
{
path: '/login',
name: 'login',
component: login
},
{
path: '/about',
name: 'about',
component: about,
// beforeEnter: [removeQueryParams, removeHash]
beforeEnter: (to, from, next) => {
    console.log('触发路由独享守卫beforeEnter')
    next()
    // 路由独享守卫： 只在进入路由时触发，不会在 params、query 或 hash改变时触发。从一个不同的 路由导航时，才会被触发。
    // 用法和全局的前置守卫是差不多的
    // 也可以将一个函数数组传递给 beforeEnter，这在为不同的路由复用守卫时很有用
    // const a = 1
    // const b = 2
    // if (a === b) {
    // console.log('请登录！！！')
    // next(false) // 禁止跳转
    // } else {
    // next()
    // }
    }
},
{
path: '/home',
name: 'home',
component: home
}
]
})
// beforeEach、beforeResolve、afterEach依次触发
// 全局前置守卫
/* 主要用于页面跳转时候的登录状态校验以及跳转地址的确定 */
router.beforeEach((to, from, next) => {
console.log('触发全局前置导航守卫beforeEach')
// to: Route: 即将要进入的目标 路由对象
// console.log('to--->>>>>', to)
// from: Route: 当前导航正要离开的路由
// console.log('from--->>>>>', from)
// next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
/*
模拟登录的状态，去跳转不同的页面
当随机数大于5时，表明是登录状态
当随机数小于5时，表明是未登录状态，无论跳转到哪个页面，都要跳转到登录页面
*/
// let randomNum = Math.random() * 10
// // console.log('randomNum', randomNum)
// if (randomNum > 5) {
// console.log('这是登录状态')
// }
// if (randomNum <= 5) {
// router.push({ name: 'login' })
// }
next()
})
// 每次导航时都会触发，但是确保在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被正确调用
// router.beforeResolve 是获取数据或执行任何其他操作（如果用户无法进入页面时你希望避免执行的操作）的理想位置。？？？？其实 很懵逼
router.beforeResolve((to, from, next) => {
console.log('触发全局解析导航守卫beforeResolve')
next()
})
// 全局后置钩子，然而和守卫不同的是，这些钩子不会接受 next 函数也不会改变导航本身
// 它们对于分析、更改页面标题、声明页面等辅助功能以及许多其他事情都很有用。？？？？其实 很懵逼
router.afterEach((to, from) => {
console.log('触发全局后置守卫afterEach')
})
/*
导航被触发。
在失活的组件里调用 beforeRouteLeave 守卫。
调用全局的 beforeEach 守卫。
在重用的组件里调用 beforeRouteUpdate 守卫(2.2+)。
在路由配置里调用 beforeEnter。
解析异步路由组件。
在被激活的组件里调用 beforeRouteEnter。
调用全局的 beforeResolve 守卫(2.5+)。
导航被确认。
调用全局的 afterEach 钩子。
触发 DOM 更新。
调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。
即：整体上先调用全局的，然后调用路由独享的，再调用组件的
*/
export default router

二 home.vue

<template>
<div>
<div>home</div>
<button @click="$router.push('/about')">去关于页面</button>
</div>
</template>
<script>
export default {
name: 'home',
beforeRouteEnter: (to, from, next) => {
// 组件内的路由： --->>>>>> beforeRouteEnter、beforeRouteLeave、beforeRouteUpdate
// 在beforeRouteEnter中不能使用this,需要使用vm来代替this，因为进入该组件之前被调用，组件实例还没有被创建，不能使用 this关键字
// 此时该组件还没被实例化
console.log('触发组件beforeRouteEnter')
next(vm => {
// 此时该组件被实例化了
alert(vm.home) // 弹出消息框信息为hw
})
},
beforeRouteLeave: (to, from, next) => {
console.log('触发了组件的beforeRouteLeave')
next()
},
beforeRouteUpdate (to, from, next) {
// 在当前路由改变，但是该组件被复用时调用
// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
next()
},
data () {
return {
home: 'home'
}
},
methods: {
}
}
</script>

三 login.vue

<template>
<div>
<div>登录页面</div>
<button @click="$router.push('/about')">去关于页面</button>
</div>
</template>
<script>
export default {
name: 'login'
}
</script>

四 about.vue

<template>
<div>about
<button @click="$router.push('/login')">去登录页面</button>
</div>
</template>
<script>
export default {
name: 'about'
}
</script>