vue-element-admin 快捷标签导航（三）

一、实现的效果：给vue-admin-template添加头部快捷导航标签

二、需要操作的具体位置及代码修改

1.先把vue-element-admin中的 TagsView组件复制过来并在index.js中暴露出来，后边引用

2.在index.js文件中暴露

3.修改TagsView中的index.vue代码中的routes，也就是获取路由；由于没有做权限验证，所以注释的return是检测当前用户权限路由改为获取全部路由。

4.在layout/index.vue中引用刚才复制的TagsView组件：注意class要有，<tags-view />为封装的标签

5.此时上面四部做完之后，还是不会显示，因为在layout/components/AppMain.vue没有引入缓存数组也就是路由菜单数组keep-alive此处引入官方文档的解释

看完文档后，在AppMain.vue中引入keep-alive标签，注意：cachedViews中return的数组在store里面，所以下一步要进行复制store中的tagsView

6.复制store中的tagsView.js，查看源码就能看到cachedViews和visitedViews两个数组

7.复制完毕之后文件本身不用做改动，要在store/getters.js和store/index.js中进行暴露：注意，大小写一定要注意！！！

8.做完上述操作重启项目npm run dev 你就会发现快捷导航标签导航就出现了；但是你会发现我的截图中有的导航带有关闭的小叉号，但是首页就没有，这就是vue-element-admin中固钉标签导航了，注意是固钉，不是固定！操作方法：查看官方文档发现，需要在路由中添加标签；这里有两个小知识点：（1）noCache:true 意思是说每次点击标签导航时都会重新请求，false就是不会重新请求（2）affix: true 这个在路由中就是控制是否有关闭功能的标签。

像我的截图似的首页无法关闭，就是在meta中添加了affix属性

9.快捷导航标签的右键功能：文字是英文的，并且refresh刷新功能还不行，下面教一下怎么改成中文，以及刷新功能的实现。

因为我们复制的TagsView组件，所以先去找layout/components/TagsView/index.vue。读代码发现那四个功能都在这，所以直接改成中文即可

但是此时的刷新功能，跳转的页面是404；去看刷新定义的方法refreshSelectedTag()发现他会在你当前路由前面加上一个/redirect，导致找不到路由，所以跳到404页面；这时就需要在router/index.js中吧redirect路由进行配置一下，同样的去vue-element-admin中找到定义的路由，复制过来；然后把views/redirect再复制过来

更改路由文件router/index.js

复制views/redirect文件夹，此时刷新功能就已经实现了。至此所有快捷标签导航功能已经添加完毕！

10.对了，这些加完之后，你会发现标签导航的css不对，上面忘了讲了，要在layout/components/AppMain.vue中添加scss，不然就会覆盖下面的文字及其他的东西，同样也是从vue-element-admin中复制过来即可。

三、注意事项

1.一定要注意从 vue-element-admin中复制到vue-admin-template中文件一定要全，大小写一定要区分，另外引入及暴露一定要写清楚。

2.至于代码如何实现的我没有进行系统的分析，大家可以留言进行讨论。

vue-element-admin 快捷标签导航（三）相关推荐

基于Vue+Element Plus实现快速导航
文章目录前言一.分析二.实现三.实现效果图总结前言快速导航对于前端开发的靓仔们应该是很熟悉了,他能快速的切换到之前打开的页面,是系统更加灵活方便.我这里采用的是Vue+Element p ...
Vue Element Admin 使用mock模块模拟数据
Mock 数据是前端开发过程中必不可少的一环,是分离前后端开发的关键链路.通过预先跟服务器端约定好的接口,模拟请求数据甚至逻辑,能够让前端开发更加独立自主,不会被服务端的开发所阻塞. vue-elem ...
vue+element+admin（初始化项目）
2022.10.17我接触到了vue+element+admin的使用,首先要安装node.jshttps://nodejs.org/zh-cn/download/.和githttps://git-s ...
vue element admin登录方式切换（密码登录或短信登录）
显示结果: 具体代码可以根据vue element admin源码进行更改,下面是页面代码 <el-form ref="loginForm" :model="log ...
后端使用SpringBoot和Jwt工具与Redis数据库+前端Vue Element Admin实现用户携带token的登录功能案例
登录功能描述: 前端输入对应的用户信息 ,在用户输入邮箱后点击发送按钮给邮箱发送验证码,拿取到验证填完之后,点击登录按钮给后端发送请求 ,后端接收到请求之后 ,第一步校验验证码,第二步校验用户名和密 ...
Vue Element Admin 用mock模块模拟数据
步骤简单一在 src/api/charts 中添加接口 , 方法名为 getindexMock import request from '@/utils/request'export func ...
Vue Element Admin 添加侧边栏以及他的页面
1. 在 /src/views/ 下添加需要的页面 2. 配置路由器 router 中的路由表 routes,分为 constantRoutes 和 asyncRoutes. 将路由的配置信息添加进路 ...
Vue-elementui-admin 快捷标签导航栏解决切换路由不刷新问题
由于目前 keep-alive 和 router-view 是强耦合的,而且查看文档和源码不难发现 keep-alive 的 include 默认是优先匹配组件的 name ,所以在编写路由 rout ...
vue + element 中tab标签页拖拽(拖动) sortablejs插件实现
tab签拖拽更换位置业务需求效果图 1.npm安装sortable.js 2.html代码块 3. 在script下导入 4.js逻辑片段(**const el 必须找到自己拖拽的那一列** ) ...

vue-element-admin 快捷标签导航（三）

vue-element-admin 快捷标签导航（三）相关推荐

最新文章

热门文章