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指定页时，跳转至login
if (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 data
console.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='李四'
}
})
},
})
你学废了吗，欢迎指正，欢迎指正。