前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >VUE去中心化的路由实现

VUE去中心化的路由实现

作者头像
星痕
发布2019-12-19 12:28:13
7880
发布2019-12-19 12:28:13
举报

在做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去中心化路由功能已完成!

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档