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

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

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

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

K8S NFS 共享存储

NFS 共享存储前面我们学习了 hostPath 与 Local PV 两种本地存储方式,但是平时我们的应用更多的是无状态服务,可能会同时发布在不同的节点上,这个时候本地存储就不适用了,往往就需要使用到共享存储了,比如最简单常用的网络共享存储 NFS,本节课我们就来介绍下如何在 Kubernetes...

html5+css3做的响应式企业网站前端源码

大家好,今天给大家介绍一款,html5+css3做的响应式企业网站前端源码 (图1)。送给大家哦,获取方式在本文末尾。首页banner幻灯片切换特效(图2)首页布局简约合理(图3)关于我们页面(图4)商品列表(图5)商品详情(图6)服务介绍(图7)新闻列表(图8)联系我们(图9)源码完整,需要的朋友...

虚幻引擎5.5现已发布 手游开发、动画制作重大改进

Epic在今天发布了虚幻引擎5.5,现可通过Epic Launcher下载。此版本在动画创作、渲染、虚拟制片、移动端游戏开发和开发人员迭代工具集等方面做出了重大改进。 官方博客:虚幻引擎5.5现已发布,在动画创作、虚拟制作和移动游戏开发方面取得了显著进步,渲染、摄像机内视觉特效和开发人员迭代等领域的...

USB电池充电基础:应急指南

USB为便携设备供电与其串行通信功能一样,已经成为一种标准应用。如今,USB 供电已经扩展到电池充电、交流适配器及其它供电形式的应用。应用的普及带来的一个显著效果是便携设备的充电和供电可以互换插头和适配器。因此,相对于过去每种装置都采用专用适配器的架构相比,目前的解决方案允许采用多种电源进行充电。毋...

Vue页面传参详解

一、两种方式方法1:name跳转页面this.$router.push({name:'anotherPage',params:{id:1}})另一页面接收参数方式:this.$route.params.id示例:控制台展示:方法2:path跳转页面this.$router.push(...

Vue进阶(二十六):详解router.push()

在Vue2.0路由跳转中,除了使用 <router-link> 声明式创建 a 标签来定义导航链接,还可以借助 router 的实例方法,通过编码式编写代码来实现。router.push(location)想要导航到不同的 URL,则使用 router.push 方法。这个方法会向 hi...