路由分发到不同文件

最新推荐文章于 2022-09-06 22:35:03 发布

海绵老呆

最新推荐文章于 2022-09-06 22:35:03 发布

阅读量145

点赞数

分类专栏： js vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_37343874/article/details/125864148

版权

js 同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

vue

14 篇文章 0 订阅

订阅专栏

本文介绍了如何使用Vue.js的路由模块化管理，将路由根据不同的功能模块分布到不同的文件中，同时结合授权服务实现权限控制。通过创建主路由文件并导入各模块路由，设置默认布局和动态导入组件，实现了登录、主页及多个子模块的路由配置。子路由文件如`project-management.js`展示了如何定义并嵌套子路由，同时应用权限检查。

摘要由CSDN通过智能技术生成

将路由根据模块不同进行分发到不同文件
如图所示：
请添加图片描述

主路由文件index.js

import { createRouter, createWebHistory } from 'vue-router'
import { Authorize } from "@/authorization/authorize_service";
import Login from '../views/Login.vue'
import RootPage from '../views/RootPage.vue'
import IndexPage from '../views/home/IndexPage.vue'

import expertLibrary from "@/router/expert-library";
import stationInform from "@/router/station-inform";
import projectManagement from "@/router/project-management";
import dataStatistics from "@/router/data-statistics";
import experimentControl from "@/router/experiment-control";

function setDefaultLayout(routers, path){
  console.log(routers)
  return routers.map(value =>
      {
        value.path = `/${path}${value.path}`;
        // value.meta = {...value.meta, layout: defaultLayout};
        if(value.filePath) { //filePath 用于获取多层文件夹下的文件路由
          value.component = () => import (`@/components/${path}/${value.filePath}/${value.name}.vue`);
        }else{
          value.component = () => import (`@/components/${path}/${value.name}.vue`);
        }
        return value;
      }
  )
}

export default createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
    {
      path: '/root-page',
      name: 'RootPage',
      component: RootPage,
      beforeEnter: [Authorize],
      redirect: {
        name: 'IndexPage'
      },
      children: [
        {
          path: 'index-page', // 主页
          name: 'IndexPage',
          beforeEnter: [Authorize],
          component: IndexPage
        },
        // 加载子路由
        ...setDefaultLayout(expertLibrary, "expert-library"),
        ...setDefaultLayout(stationInform, "station-inform"),
        ...setDefaultLayout(projectManagement, "project-management"),
        ...setDefaultLayout(dataStatistics, "data-statistics"),
        ...setDefaultLayout(experimentControl, "experiment-control"),
      ],
    },
  ]
})

子路由文件就不全部放出来了，放一个例子出来
project-management.js

import {Authorize} from "@/authorization/authorize_service";

export default [
    {
        path: '/project', // 项目管理
        name: 'ProjectManagement',
        beforeEnter: [ Authorize ],
    },
    {
        path: '/audit-states', // 流程详情
        name: 'AuditStates',
        filePath: '/my-audit'
    },
    {
        path: '/process-record', // 流程记录
        name: 'ProcessRecord',
        filePath: '/my-audit'
    },
    {
        path: '/software-revise', // 软件修改流程详情
        name: 'SoftwareRevise',
        filePath: '/my-audit/all-process'
    },
    {
        path: '/all-process/general-testing', // 软件修改流程详情
        name: 'GeneralTesting',
        filePath: '/my-audit/all-process'
    }
]