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

前言

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

前期准备

添加快捷导航需要在 vue-admin-template 基础上进行修改,同时利用到 vue-element-admin 中的部分代码。
首先clone vue-admin-template 整个项目。对于 vue-element-admin 可以clone整个项目,也可以仅下载需要的部分文件,所需的文件在操作流程中有额外说明

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

操作流程

注:

  1. 以下操作流程是按照自行摸索的操作顺序来写的,因此可能前后会涉及到同一文件的操作,流程描述不够简洁,但是前后操作之间是有逻辑关系的
  2. 下文截图中的红色框表示添加快捷导航需要修改或新增的内容,红色框之外的内容并不要求和截图中完全相同,也就是说大家只需要变动红色框内的代码即可
  1. 修改 @/layout/index.js
    在布局中添加快捷导航tagsView

  1. 新增 @/layout/components/TagsView

注:此文件夹来自vue-element-admin 项目代码

把对应的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

注:这两个文件来自vue-element-admin 项目代码

第7步相当于仅仅是个变量声明,但是实际的需要用到的内容在tagView.jspermission.js中。

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

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

总结

前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中可以发现以下内容

posted @ 2023-04-22 13:13  0x7F  阅读(353)  评论(5编辑  收藏  举报