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

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

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

我想将 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路由动态加载实现权限菜单” 的相关文章

一套智能停车场收费管理系统设计方案,拓扑图VISIO格式

大家好,我是薛哥。最近VIP会员群的读者咨询停车场管理系统的规划设计方案,今天分享一个模板素材,主要里面的拓扑图可以编辑的,VISIO格式,建议收藏备用。此套完整的Word方案,VIP会员下载!智能停车场收费管理子系统1、系统概述本次停车场管理系统设计纯车牌识别系统,并可在合适的位置设置中央收费点,...

2024前端面试真题之—VUE篇

添加图片注释,不超过 140 字(可选)1.vue的生命周期有哪些及每个生命周期做了什么? beforeCreate是new Vue()之后触发的第一个钩子,在当前阶段data、methods、computed以及watch上的数据和方法都不能被访问。 created在实例创建完成后发生,当前阶段已...

GitLab 14.6发布,优化Geo高可用,安全更新等

昨天,GitLab官方按照管理发布了有一个月度版本GitLab 14.6的发布,这也是本年度收官版本。14.6中在安全合规性方面,在Geo方面以及MD代码块一键复制等方便做了优化,另外还在UI图标方面发布了一套全新的图标。详细情况请和虫虫一起学习。GitLab 14.6主要改进使用 Geo 实现无缝...

前后端分离自动化运维平台开发

运维平台采用前后端分离:前端vue,框架vue-element-admin;后端python,框架django-rest-framework.目前运维平台模块如下:1、 CMDB管理应用管理、环境管理、开发语言管理、产品项目管理、资产管理2、 构建发布持续构建、持续部署、Jar工程依赖构建3、 容器...

Python 幕后:Python导入import的工作原理

更多互联网精彩资讯、工作效率提升关注【飞鱼在浪屿】(日更新)Python 最容易被误解的方面其中之一是import。Python 导入系统不仅看起来很复杂。因此,即使文档非常好,它也不能让您全面了解正在发生的事情。唯一方法是研究 Python 执行 import 语句时幕后发生的事情。注意:在这篇文...

15款测试html5响应式的在线工具

手机、平板灯手持设备的增多,网站要顺应变化,就必须要做响应式开发,响应式网站最大的特点在于可以在不同设备下呈现不同的布局,是基于html5+css3技术,目前越来越多的网站开始采用了响应式设计,而下面15款工具可以方便测试你的html5响应式效果。Responsinatorhttp://www.re...