HR-Saas（四）：路由和页面

最新推荐文章于 2023-03-09 19:44:41 发布

原创

最新推荐文章于 2023-03-09 19:44:41 发布 · 368 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文介绍了在HR-SaaS项目中如何整理和搭建路由页面。首先删除基础模板的冗余页面，然后设置了静态和动态路由，接着快速搭建业务模块，包括创建对应的页面和路由文件。动态路由与静态路由暂时合并，形成左侧菜单。最后，解析了菜单的显示逻辑并添加了图标。

1. 路由页面整理

目标 删除基础模板中附带的多余页面

基础模板帮我们提前内置了一些页面，本章节我们进行一下整理

首先，我们需要知道类似这种大型中台项目的页面路由是如何设置的。

简单项目

当前项目结构

在这里插入图片描述

为什么要拆成若干个路由模块呢？

因为复杂中台项目的页面众多，不可能把所有的业务都集中在一个文件上进行管理和维护，并且还有最重要的，前端的页面中主要分为两部分，一部分是所有人都可以访问的，一部分是只有有权限的人才可以访问的，拆分多个模块便于更好的控制

静态路由和动态路由

在这里插入图片描述

**注意**这里的动态路由并不是 路由传参的动态路由

了解完成路由设计之后，我们对当前的路由进行一下整理

删除多余的静态路由表 src/router/index.js

/**
 * constantRoutes
 * a base page that does not have permission requirements
 * all roles can be accessed
 */
export const constantRoutes = [
  {
   
   
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },

  {
   
   
    path: '/404',
    component: () => import('@/views/404'),
    hidden: true
  },

  {
   
   
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [{
   
   
      path: 'dashboard',
      name: 'Dashboard',
      component: ()

最低0.47元/天解锁文章