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

旧约Alatus

已于 2023-12-25 14:15:23 修改

阅读量1k

点赞数 30

分类专栏： # VUE框架前端文章标签： javascript ecmascript vue.js vue 前端前端框架 js

于 2023-12-20 11:28:53 首次发布

本文链接：https://blog.csdn.net/2201_75960169/article/details/135103977

版权

前端同时被 2 个专栏收录

350 篇文章 2 订阅

订阅专栏

VUE框架

250 篇文章 0 订阅

订阅专栏

// 导入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-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;