路由守卫的参数介绍
import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/home.vue";
Vue.use(VueRouter);
const routes = [
{
path: "/",name: "Home",component: Home,},{
path: "/about",name: "About",component: () => import("../views/About.vue"),]
const router = new VueRouter({
mode: "history",base: process.env.BASE_URL,routes,});
// 这是一个全局前置路由,注意是全局的前置路由
// 在每一次切换路由之前,都会触发该函数注意是之前
// 它有三个参数,
// to==>到哪一个路由,form==>来源哪一个路由,next是否允许前往某一个路由
//如果没有执行next页面将会值空白页面
router.beforeEach((to,form,next) => {
console.log("在每一次切换路由之前,都会触发该函数")
next()
})
export default router;
权限就需要路由守卫
现在我们有一个需求,如果要进入就是richtext页面;
用户user等于必须等于admin。才能够进入
否者不能够就进入页面,并提示弹窗
let user='user'
// to==>到哪一个路由,
// form ==> 来源哪一个路由,
// next是否允许前往某一个路由,如果没有执行next()这页面空白
router.beforeEach((to,next) => {
console.log(' to',to);
if (to.path == '/richtext') {
if (user == 'admin') {
next();
} else {
alert('你不是管理员')
}
} else {
next()
}
})
元路由Meta
很多时候,我们需要将每一个路由上放置一个的信息
我们可以放在mata上
简单配置如下
{
path: "/zujian",name: "zujian",Meta: {
user: admin,info:'我是admin',key:'key-value的形式'
},component: () => import("../views/zujian.vue"),
全局后置路由守卫
// 全局后置路由守卫,它只有两个参数
// to==>到哪一个路由,
// form ==> 来源哪一个路由,
router.afterEach((to,form) => {
console.log('to',to,form);
console.log('form',form);
})
有的小伙伴可能会说,
这个后置路由守卫都切换到自己需要的页面了。
还守卫了毛线,靠!
你这样一说还真是的,我都切换完了。
还需要你守卫吗?你一遍凉快去吧。
难道它真的没有一点儿作用了吗?
不是的你说的那样,它是有作用的;
在动态更改系统顶部的标题的时候,
就需要使用这个全局后置路由守卫
router.afterEach((to,to);
console.log('form',form);
document.title=to.mata.title
})
独享路由守卫
独享路由守卫:顾名思义就是对某一个路由进行守卫
{
path: "/zujian",// 独享路由~注意:没有独享后置路由
//独享只有一个
beforEnter: (to,next) => {
// to==>到哪一个路由,
// form ==> 来源哪一个路由,
// next 放行
}
},
组件内路由守卫
<template>
<div>
我是页面测试二
</div>
</template>
<script>
export default {
//通过路由规则进入该组件时候被调用
beforeRouteEnter (to,from,next) {
console.log('beforeRouteEnter==>to',);
console.log( 'beforeRouteEnter==>from',from );
// 放行,如你你不放行,路由景无法进入该页面
// 在视图上页面显示的是上一个页面哈
next();
},//通过路由规则,离开组件的时候被调用
beforeRouteLeave(to,next){
console.log('beforeRouteLeave==>',to );
console.log('beforeRouteLeave==>',from );
// 如果你不放行,路由无法离开该页面
// 在视图上始终显示该页面,因为路由没有离开
next();
}
}
</script>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。