若依Vue设置切换Tab栏菜单的时候不刷新,还可以+设置点击侧边菜单的时候刷新

原创已于 2025-05-09 15:54:30 修改 · 732 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript #若依 #tab标签

于 2025-05-09 15:23:19 首次发布

先赞再看养成习惯,谢谢你的点赞

若依切换tab菜单栏的时候老是刷新,比如原本在 班级tab菜单 查看第三页的班级信息,然后这时候想看看 老师tab菜单 ,点击过去之后看完,想回到班级tab菜单继续看班级信息,结果点回来的时候刷新了,又给你回到了第一页。这样是比较麻烦的，所以我们要缓存页签。

官方的文档是这样的 (后面还有我自己理解的跟着我的思路走就行了)

若依官网文档
页签缓存

由于目前 keep-alive 和 router-view 是强耦合的，而且查看文档和源码不难发现 keep-alive 的 include (opens new window)默认是优先匹配组件的 name ，所以在编写路由 router 和路由对应的 view component 的时候一定要确保两者的 name 是完全一致的。(切记 name 命名时候尽量保证唯一性切记不要和某些组件的命名重复了，不然会递归引用最后内存溢出等问题)

DEMO:
//router 路由声明
{
  path: 'config',
  component: ()=>import('@/views/system/config/index'),
  name: 'Config',
  meta: { title: '参数设置', icon: 'edit' }
}
//路由对应的view  system/config/index
export default {
  name: 'Config'
}
一定要保证两者的名字相同，切记写重或者写错。默认如果不写 name 就不会被缓存，详情见issue 。

提示

在系统管理-菜单管理-可以配置菜单页签是否缓存，默认为缓存

说大白话就是下面的步骤

如果你是动态路由,在admin这里设置菜单的路由地址,然后开启缓存

然后你的 vue页面,也就是这个菜单的页面里面的 name 要大驼峰命名

例如我的客户信息菜单的 vue页面

name: 要大驼峰 ,例如你刚才的路由地址填的是 test, 那你在vue组件里面的name 就要写 Test

如果你的路由地址原本就是 Test ,那你vue组件的name也是 Test

如果你是静态路由(注意)

路由名称是什么

那你 vue组件的name就是什么

改完之后,不仅tab菜单切换不刷新,连侧边栏的菜单切换也不刷新了,这可能不是我们想要的效果

如果你想点击侧边栏的菜单能刷新的话,按照下面的步骤继续

找到 /layout/sidebar/SidebarItem.vue ，对el-menu-item增加一个点击事件

代码事件逻辑如下

//比较确定是否为当前页面

if (this.$route.name == item.name) {

//如果是当前页面刷新页面

this.$store.dispatch('tagsView/delCachedView', this.$route).then(() => {

const { fullPath } = this.$route;

this.$router.replace({

path: '/redirect' + fullPath

})

})

} else {

//如果不是当前页面，清除keepalive缓存

this.$store.dispatch("tagsView/delCachedView", item);

}

这样 ,我们点击切换tab菜单就不会刷新,但是我们点击侧边栏菜单的时候就会刷新切换过去