专栏首页JAVA后端开发VUE去中心化的路由实现

VUE去中心化的路由实现

在做VUE时,很多时候把路由写在同一个路由文件里,这样在项目越来越大时,该文件需要多次修改,这样很不方便。 现在需要把各个路由分配至各个模块中,然后进行汇总 1.编写各个模块的路由

 export default [


    {
        path: '/sys/auth/menu',
        component: resolve => require(['./sys_menu.vue'], resolve),
        meta: {title: '菜单管理'}
    },
    {
        path: '/sys/auth/resource',
        component: resolve => require(['./sys_auth_resource.vue'], resolve),
        meta: {title: '资源管理'}
    },
    {
        path: '/sys/auth/role',
        component: resolve => require(['./sys_auth_role.vue'], resolve),
        meta: {title: '角色管理'}
    },

]

2.遍历各个路由,汇总路由

 import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);
let routers = []
const routerContext = require.context('./views', true, /router\.js/)
routerContext.keys().forEach(route => {
    // 如果是根目录的 index.js、 不做任何处理
    if (route.startsWith('./index')) {
        return
    }
    const routerModule = routerContext(route)
    // 兼容 import export 和 require module.export 两种规范 Es modules commonjs
    routers = [...routers, ...(routerModule.default || routerModule)]
})
export default new Router({
    routes: [
        {
            path: '/',
            redirect: '/dashboard'
        },
        {
            path: '/',
            component: resolve => require(['./components/common/Home.vue'], resolve),
            meta: {title: '主页'},
            children: routers
        },
        {
            path: '/login',
            component: resolve => require(['./views/Login.vue'], resolve)
        },
        {
            path: '/oauth/:source',
            component: resolve => require(['./views/oauth/oauth.vue'], resolve)
        },
        {
            path: '*',
            redirect: '/404'
        },

    ]
})

至此,VUE去中心化路由功能已完成!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JAVA单服务应用拆分成多个服务的实践(2)--服务的dubbo化

    上篇文章JAVA单服务应用拆分成多个服务的实践(1)--拆分的设计思想--提到,需要将各个应用微服务化. 我的应用是使用Spring boot ,没用spri...

    星痕
  • JAVA单服务应用拆分成多个服务的实践(3)--前端的nginx转发

    上篇文章JAVA单服务应用拆分成多个服务的实践(2)--服务的dubbo化已经将部分模块微服务化了,但我们怎么测试? 我们的目标是支持ALL In One,又...

    星痕
  • vue组件el-dialog重新执行mounted方法的技巧

    在Vue开发中,有时需要我在同一个列表中,多次加载同一个组件,但问题来了。 该组件只在页面加载中,加载一次,后面不会再加载了,如el-dialog,解决办法如...

    星痕
  • CSS实现全屏切换效果

    小胖
  • Linux常用命令速查-网络管理

    Java学习录
  • 手把手自动化MySQL数据库备份

    Lemon黄
  • 分享一次应急响应简述

    几周前接到某单位管理人员电话,说“您好,我单位某系统受到攻击,现系统已瘫痪(想到系统已瘫痪,心理特别慌张,要写溯源报告了),应用无法使用,需到现场进行排查”,随...

    FB客服
  • PL/SQL基础语法

    有时候我们需要对数据库中的数据进行一些稍微复杂的操作,而且这些操作都是一次性的,用完之后就不再用了。 用存储过程的话就太麻烦,而且浪费,用完了还要去删除。而单个...

    陈树义
  • 视频压缩编码技术(H.264) ——编码器和解码器

    如上图所示,输入的帧或场Fn 以宏块为单位被编码器处理。首先,按帧内或帧间预测编码的方法进行处理。如果采用帧内预测编码,其预测值PRED(图中用P 表示)是由当...

    瓜大三哥
  • 关于线索评分模型的一些思考

    关于线索评分大家比较熟悉的一个模型是预算(Budget)、授权(Authority)、需求(Need)和时间表(Time Frame),如果客户有足够的预算,有...

    臭豆腐

扫码关注云+社区

领取腾讯云代金券