vue2 和 vue3 的路由守卫

vue2 路由守卫：

vue-router 路由实现:
路由就是用来跟后端服务器进行交互的一种方式，通过不同的路径，来请求不同的资源，请求不同的页面是路由的其中一种功能。
首先知道有3个参数 to , from, next (意义：
to是即将要进入的目标路由对象,
from 是当前导航即将要离开的路由对象,
next调用该方法后，才能进入下一个钩子函数afterEach )

next() // 直接进入to所指的路由
next（false） // 中断当前路由
next(‘route’) // 跳转指定路由
next(‘error’) // 跳转错误路由

1 全局守卫： this.$router.beforeEach((to, from, next) =>{next(); })
执行之前触发beforeEach(to,from,next)，执行后触发router.afterEach(to, from)；2 路由独享守卫： this.$route.beforeEnter(to, from ,next())；3 组件内部的守卫：
路由进入之前 beforeRouteEnter(to, from, next())
路由更新之前 beforeRouteUpdate(to, from, next())
路由离开之前 beforeRouteLeave(to, from, next())

看下示例
vue2 中写入全局的路由守卫，一般就直接在router.index 页面完成。

import Vue from 'vue';
import Router from 'vue-router';Vue.use(Router)const router = new Router({routes: [path: '/', // 默认进入路由redirect: '/home'  //重定向},{path: '/login',name: 'login',component: LoginPage},....]})router.beforeEach((to, from, next) => {console.log('初始化就执行全局路由守卫');// to: Route: 即将要进入的目标 路由对象// from: Route: 当前导航正要离开的路由// next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。const nextRoute = ['home', '....'];        let isLogin = global.isLogin; // 是否登录// 未登录状态；当路由到nextRoute指定页时，跳转至loginif (nextRoute.indexOf(to.name) >= 0) { if (!isLogin) {router.push({ name: 'login' })}}// 已登录状态；当路由到login时，跳转至home if (to.name === 'login') {if (isLogin) {router.push({ name: 'home' });}}next();});// 或者这样写  全局路由守卫// router.beforeEach((to, from, next) => {//  const isLogin = localStorage.ele_login ? true : false;//   if (to.path == '/login') {//    next();//  } else {// 是否在登录状态下//    isLogin ? next() : next('/login');//  }// });export default router;

假设我们执行了跳转登录页面
login.vue页面内部
当点击登录按钮时

 handleLogin() { // 发送请求this.$axios.post("/api/posts/goxxx", {phone: this.phone, // 参数code: this.verifyCode // 参数}).then(res => {// console.log(res);// 检验成功 设置登录状态并且跳转到/localStorage.setItem("ele_login", true);this.$router.push("/"); // 进入首页}).catch(err => {// 返回错误信息this.errors = {code: err.response.data.msg};});},

vue2独享路由守卫

就是某一个路由所单独享用的路由守卫。

官方定义是这样说的：你可以在路由配置上直接定义 beforeEnter 守卫,这些守卫与全局前置守卫的方法参数是一样的。
给个模拟的需求当path路径名必须是xinxi才可以进行访问
我们在路由页面中

{name: 'xinxi',path: 'news', // 注意路由底层给你加了 '/' ，如果自己加 '/' 有可能还显示不出效果component:News,meta:{isAuth:true,title:'信息'},beforeEnter: (to,from,next)=>{//里面的内容跟全局前置路由守卫一样的代码console.log('beforeEnter',to,from,next)if(to.meta.isAuth){if(localStorage.getItem('school') === 'xinxi'){next()}else{alert('权限不够用')}}else{next()}}
},
注意 ：独享路由守卫只有前置你，没有后置。独享的路由守卫可以和全局后置路由守卫配合在一起(可以随意的组合)

组件内部守卫

  //通过路由规则进入该组件时候被调用beforeRouteEnter(to, from, next) {let dataconsole.log(to, from)if (from.name === 'buildingDeoMonitor') {if (sessionStorage.getItem('navData') != null) {data = JSON.parse(sessionStorage.getItem('navData'))next(vm => {vm.navFormInfo.data = data})} else {next()}} else {next()}},假设我们要离开某个页面就要看是否要清除的缓存或者判断
// 路由离开之前beforeRouteLeave(to, from, next) {// 判断要跳转哪个页面 从而清除缓存sessionStorage.removeItem("treelist");sessionStorage.removeItem("orgid");next();},再或者beforeRouteLeave(to, from, next) {// 判断是否提交if (this.action == 1) {// 判断往哪里跳转if (to.path.indexOf("dataitem") != -1) {if (this.issubmit > 1) {sessionStorage.setItem("eauForm", JSON.stringify(this.ruleForm));next();} else {this.ismess = true;this.success = 3;this.message = this.$t("phrase.saveEneFirst");}} else {next();}} else {next();}},

vue2的也就结束了
vue3 和这些几乎是一样的。唯一不同的是就是组件内部的路由守卫
也就是说 onBeforeRouteLeave、onBeforeRouteUpdate是vue-router提供的两个composition api，它们只能被用于setup中。

import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router';
export default {setup() {onBeforeRouteLeave((to,from)=>{//离开当前的组件，触发alert('我离开啦')})onBeforeRouteUpdate((to,from)=>{//当前组件路由改变后，进行触发console.log(to);})}
}

值得注意的是路由进入之前 beforeRouteEnter并没有变，也不用写在setup内部。

 export default defineComponent({setup() {let obj=reactive({name:'张三',})return {obj}},beforeRouteEnter(to, from, next) {console.log(to);  //上一个页面前往的的页面(当前页面)console.log(from);//来自哪一个页面next((e:any) => {// 这个回调参数e,包含setup中暴露出去的数据以及内置方法window.console.log(e)// 获取是否来自home1页面if(from.path=='/home1'){e.obj.name='李四'}})},})

你学废了吗，欢迎指正，欢迎指正。