当前位置:首页 > 技术分析 > 正文内容

vue 动态加载 router 配置_vue路由动态加载实现权限菜单

ruisui883个月前 (02-13)技术分析12

我想将 vue 的路由部分动态加载,并且这个动态的配置保存在服务器上,这样可以灵活的根据不同的需求进行更改。 查了些资料,大致做法如下:

setTimeout(()=>{
// 在某个时机,从服务器获取动态路由配置
    //dynamicRoutes 数据无法在服务器和客户端之间使用rest api传输
const dynamicRoutes = [
  {
    path: '/dashboard',
    component: Dashboard,
    meta: {
      requiresAuth: true
    }
  },
  {
    path: '/profile',
    component: Profile,
    meta: {
      requiresAuth: true,
      requiresAdmin: true
    }
  }
];

// 动态添加路由
    for(let route in dynamicRoutes)
router.addRoute(route);
    }, 30*1000);//模拟异步,30秒后运行

但上面的代码有个问题,component 必须要已经 import 了才行,这样就没办法通过服务器传递给客户端配置来进行了。 于是就进行了下面的修改:

setTimeout(()=>{
// 在某个时机,从服务器获取动态路由配置
    //dynamicRoutes 数据可以在服务器和客户端之间使用rest api传输
const dynamicRoutes = JSON.parse(JSON.stringify([
  {
    path: '/dashboard',
    component: './components/dashboard.vue', //这里要使用相对路径
    meta: {
      requiresAuth: true
    }
  },
  {
    path: '/profile',
    component: "./components/profile.vue",
    meta: {
      requiresAuth: true,
      requiresAdmin: true
    }
  }
]));

// 动态添加路由
    for(let route in dynamicRoutes) {
        router.addRoute({
          path: route.path,
          component: ()=> import(`${route.component}`),
          meta: route.meta
      });
        }
    }, 30*1000);//模拟异步,30秒后运行

在 component 部分,使用相对路径则可以,如果使用 @开头的路径,则不可以。虽然不完美,至少解决了些问题。

这样做的结果是将关键的组件稍稍隐藏一下,当用户侧没有某个权限的时候,则某个组件完全不加载,完全看不到。

扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/1917.html

标签: vue路由权限
分享给朋友:

“vue 动态加载 router 配置_vue路由动态加载实现权限菜单” 的相关文章

HTML5最新版本介绍

HTML5是HTML4.01和XHTML1.0之后超文本标记语言的最新版本,由一群自由思想者设计,最终实现了多媒体支持、交互性、更智能的表单和更好的语义标注。 HTML 5不只是 HTML规范的最新版本,它是用于生成现代 Web内容的一系列相关技术的总称,其中最重要的三个技术是:HTML5核心规范...

SpringCloudalibaba+Vue开发仿社交小程序-青牛白马七香车

Spring Cloud Alibaba和Vue是当今开发领域中最为流行的技术组合之一。本文将介绍如何使用Spring Cloud Alibaba和Vue开发仿社交小程序。download: https://www.97yrbl.com/t-1632.html项目概述本项目是一个仿社交小程序,包括用...

三勾商城(java+vue3)微信小程序商城+SAAS+前后端源码

项目介绍本系统功能包括: 前台展示+后台管理+SAAS管理端,包括最基本的用户登录注册,下单, 购物车,购买,结算,订单查询,收货地址,后台商品管 理,订单管理,用户管理等等功能,小伙伴一起来看看吧。三勾小程序商城基于springboot+element-ui+uniapp打造的面向开发的小程序商城...

html5迁移到微信小程序的 方法 亲测可用

切图网习惯于在做小程序之前先做成html5+vuejs的形式,因为html5切图是我们比较熟悉的方式,而且有专业的工具 以及浏览器调试也会更加的方便 灵活,效率高,而且html5的方式可以方便预览看效果,方便调整,当html5页面做好确认没问题以后 再转成小程序或者官方出品wepy的方式,这个时候就...

准考证打印入口

2023年甘肃省特岗教师、三支一扶、西部计划准考证打印时间6月27日9∶00至7月2日9∶00考试时间7月2日成绩查询时间7月15日以后温馨提示:报考人员需登录“甘肃人事考试网”(http://ks.rst.gansu.gov.cn),进入 “准考证打印”栏目,按照提示打印本人准考证并妥善保管,以备...

电脑提速教程:用NVMe固态硬盘帮扶加速SATA硬盘

不知不觉当中,固态硬盘已经取代机械硬盘成为主流。越来越多的玩家已经淘汰机械盘,使用NVMe+SATA的固态硬盘高低搭配。既然是高低搭配,就一定会有性能差距,是否能从NVMe固态硬盘中划分出一小部分空间来给SATA固态硬盘加速,实现更好地整机性能呢?答案是肯定的,而且这一功能早已隐藏在英特尔Z170、...