新增页面与菜单配置

李国平 2021/6/11 vue

# 新增 view

新增完路由之后不要忘记在 @/views 文件下创建对应的文件夹，一般一个路由对应一个文件，该模块下的功能组件或者方法就建议在本文件夹下创建一个utils或components文件夹，各个功能模块维护自己的utils或components组件。如：

# 新增 api

最后在 @/api 文件夹下创建本模块对应的 api 服务。

# 新增组件

个人写 vue 项目的习惯，在全局的 @/components 只会写一些全局的组件，如富文本，各种搜索组件，封装的日期组件等等能被公用的组件。每个页面或者模块特定的业务组件则会写在当前 views 下面。如：@/views/article/components/xxx.vue。这样拆分大大减轻了维护成本。

请记住拆分组件最大的好处不是公用而是可维护性！

# 新增样式

页面的样式和组件是一个道理，全局的 @/style 放置一下全局公用的样式，每一个页面的样式就写在当前 views下面，请记住加上scoped 或者命名空间，避免造成全局的样式污染。

<style>
/* global styles */
</style>

<style scoped>
/* local styles */
.xxx-container{
  /* name scoped */
  xxx
}
</style>

# 静态路由配置

如果熟悉 vue-router 的配置就很简单了。

首先在 @/router/index.js 中增加你需要添加的路由。

如：新增一个 excel 页面

{
  path: '/excel',
  component: Layout,
  redirect: '/excel/export-excel',
  name: 'excel',
  meta: {
    title: 'excel',
    icon: 'excel'
  }
}

仅仅这样不会有任何效果的，它只是创建了一个基于layout的一级路由，你还需要在它下面的 children 中添加子路由。

{
  path: '/excel',
  component: Layout,
  redirect: '/excel/export-excel',
  name: 'excel',
  meta: {
    title: 'excel',
    icon: 'excel'
  },
  children: [
    {
      path: 'export-excel',
      component: ()=>import('excel/exportExcel'),
      name: 'exportExcel',
      meta: { title: 'exportExcel' }
    }
  ]
}

这样侧边栏就会出现如图所示的 menu-item 了

由于 children 下面只声明了一个路由所以不会有展开箭头，如果children下面的路由个数大于 1 就会有展开箭头，如下面所示。如果你想忽视这个自动判断可以使用 alwaysShow: true，这样它就会忽略之前定义的规则，一直显示根路由。详情见路由和侧边栏

{
  path: '/excel',
  component: Layout,
  redirect: '/excel/export-excel',
  name: 'excel',
  meta: {
    title: 'excel',
    icon: 'excel'
  },
  children: [
    { path: 'export-excel', component: ()=>import('excel/exportExcel'), name: 'exportExcel', meta: { title: 'exportExcel' }},
    { path: 'export-selected-excel', component: ()=>import('excel/selectExcel'), name: 'selectExcel', meta: { title: 'selectExcel' }},
    { path: 'upload-excel', component: ()=>import('excel/uploadExcel'), name: 'uploadExcel', meta: { title: 'uploadExcel' }}
  ]
}

侧边栏就会出现如图所示的 submenu 了

# 多级目录(嵌套路由)

如果你的路由是多级目录，如本项目那样，有三级路由嵌套的情况下，不要忘记还要手动在二级目录的根文件下添加一个 <router-view>。

 <!-- 父级路由组件  -->
<template>
  <div>
    <!-- xxx html 内容  -->
    <router-view />
  </div>
</template>

如：原则上有多少级路由嵌套就需要多少个<router-view>。

# 动态路由配置

在实际开发的中，很多情况下我们需要给不同的角色配置不同的菜单，并且需要支持动态调整某一种角色的菜单，那么这个时候就需要在管理员后台进行设置了。

# 菜单配置

首先我们需要登录管理员后台，进入系统管理-菜单设置

选择需要配置的平台、中心，譬如：供应链系统-供应链中心

点击新增/编辑/添加下级，进行菜单树形结构的维护

表单介绍：

菜单类型：一级菜单/子菜单
菜单名称：菜单名称
菜单路径：菜单在浏览器网址上的路径。目录菜单一般配置为该文件的文件夹名称，为了保证路由唯一性以及缓存功能正常使用，最后一级菜单要求配置为该页面在代码中位置。
前端组件：如果是一级目录，填写layouts，如果是下级目录，并且不是最后一级目录，则填写layouts/subIndex，如果是最后一级目录，则填写该页面在代码中的位置
默认跳转地址：默认跳转地址
高亮菜单：譬如添加收货地址页面，这个页面不会出现在左侧的菜单导航中，而是通过收货地址列表页面点击添加按钮跳转的，那么进入这个页面时需要将收货地址的导航菜单高亮显示，则这里需要填写收货地址页面的路由
菜单图标：可以点击右侧按钮选择内置图标
排序：排序
是否路由菜单：目录菜单不需要路由菜单，链接菜单需要路由菜单
隐藏路由：譬如添加收货地址页面，不需要展示在左侧菜单导航中，这里就选择否，收货地址列表页面需要展示在左侧菜单导航中，这里就需要选是
打开方式：打开方式
是否固定：首页需要固定，其他则不需要
授权标示：这个属性同按钮权限授权标示属性作用相同,例如:列表页需要配置一个新增按钮,新增方式为新增页面,此时只要在新增页面配置一个授权标示,即可省去再配置一个新增按钮权限
页面缓存：需要缓存页面则打开，具体缓存页面的实现以及使用参考 ↓ 页面缓存使用

以下是一个完整模块的菜单配置实例：

# 角色授权

点击系统管理-角色设置，选中对应的角色，点击授权

# 页面缓存使用

什么是时候需要打开页面缓存开关？

当你希望页面再次打开时保留上一次打开时的状态，这个时候开启页面缓存，比如列表的搜索条件，分页等，如果你开启页面缓存，下次进入页面时这些数据将会被保留。

页面缓存使用步骤

在ith-admin系统中菜单配置时勾选 页面缓存,且菜单路径务必为***全路径***,(否则该路由将不能访问)。
在未引入ThListMixin.js的文件且勾选了页面缓存的页面(详情页,添加页等) 使用activated [官方文档 (opens new window)] 钩子函数代替created钩子函数，页面created将不再执行。相应的在未勾选页面缓存功能的页面中activated 钩子函数是不会被调用的
注意: 需要缓存的页面对应组件上需要增加name属性, 为该文件对应的路由地址,使用大驼峰拼接!

 示例:   
 路由地址为:  /member/product/list
 name应为: MemberProductList

# 逻辑修改

现在路由层面权限的控制代码都在 @/permission.js 中，如果想修改逻辑，直接在适当的判断逻辑中 next() 释放钩子即可。

在线预览文件按钮权限的使用

Th技术开发白皮书

Choose mode