首页 > 其他分享 >vue-admin-template 如何添加快捷导航(标签导航栏)

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

时间:2023-04-22 13:22:22浏览次数:56  
标签:index vue layout 变量 admin js 修改 导航 store

前言

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

前期准备

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

标签:index,vue,layout,变量,admin,js,修改,导航,store
From: https://www.cnblogs.com/hongyugao/p/17342831.html

相关文章

  • VUE3 里面使用 vuedraggable 兼容tag="transition"的问题
    vue3的拖拽tag="transition"报的错误TypeError:Cannotsetpropertiesofnull(setting'__draggable_context')安装拖拽的时候,使用命令yarnadd@marshallswain/vuedraggable 下载这个包,把dist里面的文件复制到项目里面引入即可,不要使用 yarnaddvuedraggable@nex......
  • vue3+ts使用v-for出现unknown问题
    title:vue3+ts使用v-for出现unknown问题date:2022-12-2719:00:45tags:['Vue','踩坑记录']categories:["前端篇"]最近在写项目时遇到了一个问题,当我从父组件向子组件传数据并且需要将子组件对传入的数据进行v-for循环渲染时,在此出遇到了一个ts报错报错为循环出的data......
  • vue3中使用defineExpose报TS-2339
    title:"vue3+ts使用defineExpose报TS:2339"date:2022-12-2919:32:44tags:["Vue","踩坑记录"]categories:["前端篇"]开头先把错误贴上src/hooks/usePageSearch.ts:9:27TS2339:Property'getPageData'doesnotexistontype&#......
  • delphi IDE里面的导航条太丑了,咱自己写一个
    效果图:  嗯我们今天主要看下面这一部分的实现:四个按钮是TscGPCharGlyphButton控件。上面一行显示记录位置和快速跳转的那一坨,它其实是由四个TscGPEdit控件拼接构成的。红色括号3那里,其实是把边设置成了红色,而4这个则是设置边框不显示.然后两个控件高度一致,但要比最外面......
  • Vue3快速上手+俩种创建方式+主要源码讲解
    一.Vue3快速上手2020年9月19日凌晨,尤雨溪正式发布了Vue.js3.0版本,代号:OnePiece。此框架新的主要版本提供了更好的性能、更小的捆绑包体积、更好的TypeScript集成、用于处溪理大规模用例的新API,并为框架未来的长期迭代奠定了坚实的基础。3.0版本的开发周期长达两年多,期间......
  • Vue JS项目 添加TypeScript
    VueJS项目添加TypeScript转载请注明来源谢谢git文件全部提交必须全部提交因为会改掉你的文件.很恶心.vue.config.js添加下面内容pages:{index:{entry:'src/main.js'}}项目根目录运行vueaddtypescript如果你英文可以那就忽略这一条.......
  • vue:axios异步通讯
    由于Ajax需要对dom进行频繁的操作所以这里使用axios进行替代首先放上所有代码<body><divid="vue">{{info.name}}<av-bind:href="info.url">点我</a></div><!--到入vue.js--><scriptsrc="https://cdn.jsdelivr.net/npm/......
  • boot-admin整合flowable官方editor-app源码进行BPMN2-0建模(续)
    boot-admin整合flowable官方editor-app源码进行BPMN2-0建模(续)书接上回项目源码仓库github项目源码仓库giteeboot-admin是一款采用前后端分离模式、基于SpringCloud微服务架构的SaaS后台管理框架。系统内置基础管理、权限管理、运行管理、定义管理、代码生成器和办公管理6个功......
  • Vue-Routes
    下载npmivue-router@x x为版本号 版本对应规则:vue@x==router@x+1使用一、创建应用路由器在src中创建router/index.js目录1、引入touter插件&&应用插件importVueRouterfrom'vue-touter'Vue.use(VueRouter)2、将需要做局部页面跳转的组件引入importHome......
  • VUe-数组get传递
    vue中get方法如何传递数组参数直接放在对象中传递数组 exportfunctiongetCrApplicationList(data){vartest=['111','222']returnrequest({url:'/applicant/CrApplication/List',method:'get',params:{test}})}  传递的参......