首页 > 其他分享 >VUE框架CLI组件化配置全局Router路由实现前置守卫鉴权效果------VUE框架

VUE框架CLI组件化配置全局Router路由实现前置守卫鉴权效果------VUE框架

时间:2023-12-25 14:33:24浏览次数:40  
标签:VUE 框架 对象 route params props ------ path 路由

// 导入vue-router对象
import VueRouter from "vue-router";
import Hebei from "../pages/hebei.vue";
import Henan from "../pages/henan.vue";
import City from "../pages/city.vue";
// 创建路由器对象(在这个路由器对象中配置路由)
const router = new VueRouter({
    // 在这里配置所有的路由规则
    routes : [
        // 这就是一个路由
        {
            // 路由由path和component组成
            // 这个看作key
            // 只要路径检测到的是/hebei就切换到这个组件
            path : "/hebei",
            // 这个就是路由的value,路由的value是一个组件
            component : Hebei,
            // children子路由
            children : [
                // 配置子路由
                {
                    // 对于子路由来说,path不用添加/,以/开始
                    // 系统会自动添加
                    // path : "/hebei/shijiazhuang",
                    name : "shi",
                    path : "sjz/:a1/:a2/:a3",
                    // :形式可以将后续的内容视为数据
                    component : City,
                    // 在路由中进行的配置
                    // props : {
                    //     x : 'Jack',
                    //     y : 'Rose'
                    // }
                    // props含有函数式写法
                    // props($route){
                    //     // 当前路由对象会被自动传递过来
                    //     // 将来取值时会自动调用函数
                    //     // 调用这个函数对象会获取到当前路由对象
                    //     return {
                    //         a1 : $route.params.a1,
                    //         a2 : $route.params.a2,
                    //         a3 : $route.params.a3
                    //     }
                    //     // 需要在方法最后返回对象
                    // }
                    // 这种方式只支持params方式的传参,不支持query方式
                    // 原理是将params直接内部转为props对象
                    props : true,
                    // 给路由对象添加自定义属性的话,需要在路由对象的meta路由源中定义
                    // 需要鉴权的属性
                    meta : {isAuth : true}
                },
                {
                    // 可以给路由起名字,用来防止过长导致path写一大串
                    name : "han",
                    // 数据是动态传过来的,我们只负责接收,所以两个子路由可以共享一个组件
                    path : "hd/:a1/:a2/:a3",
                    component : City,
                    // props($route){
                    //     return {
                    //         a1 : $route.params.a1,
                    //         a2 : $route.params.a2,
                    //         a3 : $route.params.a3
                    //     }
                    // }
                    props : true,
                    meta : {isAuth : true}
                }
            ]
        },
        {
            path : "/henan",
            component : Henan
        }
    ]
});
 
// 全局前置守卫,在暴露之前创建之后即可
// beforeEach中的callback什么时候被调用呢,在每一次切换任意路由组件之前
// callback没有要求,可以是普通函数也可以是箭头函数
// from是一个路由对象
// callback函数有三个参数,to from next
// from是一个路由对象有name,path,component等属性就是上面的路由对象,这里表示的是起点路由
// to表示往哪去,也是一个路由对象,表示到哪去
// next参数是一个函数,调用这个函数以后,表示放行
router.beforeEach((to,from,next) => {
    // 页面初始化的时候,from和to相同
    // 每一次切换路由组件都会执行
    let loginName = "Jack";
    // 目前需要鉴定权限的路由少,如果多会导致这里繁琐
    if(to.meta.isAuth){
        if(loginName === "Rose"){
            // 放行
            next();
        }
        else{
            alert("您没有权限");
        } 
    }
    else{
        // 放行
        next();
    }
});
 
// 导出路由器对象
export default router;

标签:VUE,框架,对象,route,params,props,------,path,路由
From: https://blog.51cto.com/u_16322355/8968421

相关文章

  • keycloak~对接login-status-iframe页面判断用户状态变更
    上次我们说了,keycloak的login-status-iframe页面的作用,并解决了跨域情况下,iframe与主页面数据传递的方法,这一次,我们主要分析login-status-iframe.html这个文件的源码,然后分析在我们系统中如何与这个页面对接。login-status-iframe.html源码<script>varinit;function......
  • 无涯教程-PostgreSQL - Views(视图)
    视图是伪表。也就是说,它们不是真实表,视图可以表示真实表的子集,从普通表中选择某些列或某些行。由于视图不是普通表,因此您可能无法在视图上执行DELETE,INSERT或UPDATE语句,但是,您可以创建一个RULE来纠正在视图上使用DELETE,INSERT或UPDATE的问题。创建视图PostgreSQL视图是使用CR......
  • 当Ajax报500错误
    ==========error======={"readyState":4,"responseText":"Apache Tomcat/6.0.35-ErrorreportHTTP Status 500-typeExceptionreportmessagedescriptionTheserverencounteredaninternalerror()thatpreventeditfromfulfillingthisr......
  • 网络安全有哪些常用的抓包工具?
    对于从事网络安全领域的技术人员来说,抓包的目的就是分析网络报文、定位网络接口问题、分析应用数据接口、学习网络协议,使用抓包工具可以直观的分析出网络数据了。那有哪些常用的抓包工具呢?请看下文:|Fiddler此工具经典且强大,它提供电脑、移动端的抓包,包括http协议和ht......
  • git设置、查看、取消代理
    设置代理:前提你得有代理哈设置代理://http||httpsgitconfig--globalhttp.proxy127.0.0.1:7890gitconfig--globalhttps.proxy127.0.0.1:7890//sock5代理gitconfig--globalhttp.proxysocks5127.0.0.1:7891gitconfig--globalhttps.proxysocks5127.0.0.1:7891......
  • 盘点2023年度最受广大电子工程师、采购喜爱的国产芯片品牌
    过去几年,全球芯片产业跌宕起伏,国际芯片技术壁垒不断抬高,我国芯片产业发展的外部环境日趋严峻复杂。因此,国产芯片技术的突破,不仅承载着我国打破西方科技霸权和突破芯片产业技术瓶颈的双重使命,也承载着以基础研究赋能百业、以先进科技支撑产业升级的希望。在国家政策扶持和市场需求变......
  • 18 事务必须遵循ACID这4个特性
    事务必须遵循ACID这4个特性。分别代表原子性、一致性、隔离性、持久性。原子性就代表,事务的执行和回退是一个整体,事务中包含的sql要么全部执行,要么全部回退。一致性就是,事务执行前后,数据库都是处于一致性状态中。隔离性就是,事务在提交之前,对于其它事务都是不可见的。直到提交时。持......
  • 云行 | 国云入江南 数智耀太湖,天翼云谱写江苏数智发展新篇!
    12月20日,以“国云入江南数智耀太湖”为主题的天翼云中国行·无锡站活动成功举办。无锡市政府部门领导,各行业客户、合作伙伴企业代表与天翼云齐聚一堂,共谋江苏省数字化发展新篇章。会上举行了天翼云“2+13”一城一池全栈云发布仪式、天翼云江苏智能算力中心落成发布仪式。通过不断......
  • VS2022远程调试Linux程序卡住问题解决
    问题:说明:使用vs2022第一次远程调试linux上的程序时,会出现调试器启动时卡住问题。原因就是第一次调试时,会在目标服务器下下载vsdbg工具,因为下载源在国外,所以下载特别慢,就会造成卡住的现象。解决:uname-m 查看远程调试时,用户文件夹下会多一个.vs-debugger隐藏文件夹,如果是使用......
  • 云图说丨初识华为云边缘安全——为加速域名保驾护航
    边缘安全(EdgeSecurity,EdgeSec)是华为云基于内容分发网络(ContentDeliveryNetwork,CDN)全球分布的加速节点,为用户的CDN加速业务提供安全防护服务。本文分享自华为云社区《【云图说】第299期初识华为云边缘安全——为加速域名保驾护航》,作者:阅识风云。边缘安全(EdgeSecurity,Edge......