新增页面

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

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

如:新增一个 excel 页面

  1. {
  2. path: '/excel',
  3. component: Layout,
  4. redirect: '/excel/export-excel',
  5. name: 'excel',
  6. meta: {
  7. title: 'excel',
  8. icon: 'excel'
  9. }
  10. }

TIP

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

  1. {
  2. path: '/excel',
  3. component: Layout,
  4. redirect: '/excel/export-excel',
  5. name: 'excel',
  6. meta: {
  7. title: 'excel',
  8. icon: 'excel'
  9. },
  10. children: [
  11. {
  12. path: 'export-excel',
  13. component: ()=>import('excel/exportExcel'),
  14. name: 'exportExcel',
  15. meta: { title: 'exportExcel' }
  16. }
  17. ]
  18. }

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

新增页面 - 图1

TIP

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

  1. {
  2. path: '/excel',
  3. component: Layout,
  4. redirect: '/excel/export-excel',
  5. name: 'excel',
  6. meta: {
  7. title: 'excel',
  8. icon: 'excel'
  9. },
  10. children: [
  11. { path: 'export-excel', component: ()=>import('excel/exportExcel'), name: 'exportExcel', meta: { title: 'exportExcel' }},
  12. { path: 'export-selected-excel', component: ()=>import('excel/selectExcel'), name: 'selectExcel', meta: { title: 'selectExcel' }},
  13. { path: 'upload-excel', component: ()=>import('excel/uploadExcel'), name: 'uploadExcel', meta: { title: 'uploadExcel' }}
  14. ]
  15. }

新增页面 - 图2

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

多级目录(嵌套路由)

如果你的路由是多级目录,如本项目 @/views/nested新增页面 - 图3 那样, 有三级路由嵌套的情况下,不要忘记还要手动在二级目录的根文件下添加一个 <router-view>

  1. <!-- 父级路由组件 -->
  2. <template>
  3. <div>
  4. <!-- xxx html 内容 -->
  5. <router-view />
  6. </div>
  7. </template>

如:@/views/nested/menu1/index.vue新增页面 - 图4,原则上有多少级路由嵌套就需要多少个<router-view>

新增页面 - 图5

新增 view

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

新增页面 - 图6

新增 api

最后在 @/api新增页面 - 图7 文件夹下创建本模块对应的 api 服务。

新增组件

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

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

新增样式

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

  1. <style>
  2. /* global styles */
  3. </style>
  4. <style scoped>
  5. /* local styles */
  6. .xxx-container{
  7. /* name scoped */
  8. xxx
  9. }
  10. </style>