vue-admin-template 如何添加快捷导航(标签导航栏)

发布时间 2023-04-22 13:20:03作者: 0x7F

前言

关于快捷导航(标签栏导航)在文档中确实有介绍,但是看完是一头雾水,不知道如何修改,不过文档最后给了一个移除的大致操作,从这里可以找到入手点

前期准备

  1. vue-admin-template 项目代码
  2. vue-element-admin 项目代码

操作流程

注:以下操作流程是按照自行摸索的操作顺序来写的,因此可能前后会涉及到同一文件的操作,流程描述不够简洁,但是前后操作之间是有逻辑关系的

  1. 修改 @/layout/index.js

在布局中添加快捷导航tagsView,以下红色框即为修改或新增内容(下同,不再赘述)

  1. 新增 @/layout/components/TagsView

把对应的component加入

  1. 修改 @/layout/components/index.js

将变量导出

  1. 修改 @/store/index.js

对于新增模块,模块中使用的变量是会经过store机制的,因此在index.js需要新增对应的module(所以可以大致说一个component如果需要使用某些数据,那么在store中就会存在一个与之对应的module,所以首先要做的就是在store的index.js(store组件的入口)中,store的创建需要指明module,在store组件创建时加入与component对应的module

  1. 修改 @/store/modules/settings.js

  2. 修改 @/src/settings.js

  3. 修改 @/store/getters.js

  4. 新增 @/store/modules/tagView.js@/store/modules/permission.js

第7步相当于仅仅是个变量声明,但是实际的需要用到的内容在tagView.jspermission.js中,因此直接将其复制到项目中

  1. (cache选做)修改 `@/layout/components/index.js/AppMain.vue

  2. (做了第9步才需要进行) 修改 @/store/getters.js

对于必做后4步的解释
前4步每一步都有着相对较清晰的操作意义,从第5步开始,实际上就开始了对于store所维护变量的操作,而具体需要维护哪些变量取决于前4步涉及的文件需要使用到哪些变量。
在第1步新增的内容中可以发现有一个store.state.settings.tagsView,这对应着第5步骤要修改的内容
然后发现其中使用到的tagsView是从defaultSettings中解析出来的,于是追踪到@/src/settings.js,因此就有了第6步的修改(tagsView的值是根据第1步它的用途得出的)
进行到这一步时,如果不去查看@/layout/components/TagsView的具体内容,就不知道是否有其他变量需要添加了。因此实际的情况应当是进行完此步骤后去尝试运行项目,然后从控制台报错信息可以发现仍有其他变量未引入(不过从文档也能了解到有2个变量,实际上有3个变量,这第3个变量在文档中没有提及,只能是根据报错信息才能找到)
@/layout/components/TagsView/index.vue中可以发现以下内容