vue 前端进行tab页面切换时，要求不刷新

最新推荐文章于 2025-04-19 14:07:25 发布

菜鸟学编程

最新推荐文章于 2025-04-19 14:07:25 发布

阅读量1w

点赞数 10

分类专栏： # Vue 文章标签： vue TagsView Tab 页签缓存

本文链接：https://blog.csdn.net/gtosky4u/article/details/117320143

版权

Vue 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了在Vue项目中遇到的页签切换导致数据刷新的问题，问题根源在于keep-alive的组件name与路由的name不完全匹配。解决办法是确保router路由声明和对应view组件的name属性完全一致，以实现正确的页面缓存。正确配置name属性对于避免内存溢出和递归引用问题也至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目中TagsView组件用于tab页面切换，在项目中已使用keep-alive，目标页面也开启了“缓存”标志，但是在tab标签点击切换时，有几个页面数据还是刷新了。查找了相关资料，最终找到了一个【页签缓存】的资料，原来主要的问题就出在 “path” 和 “name” 没有完全匹配。

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

//router 路由声明
{
  path: 'config',
  component: ()=>import('@/views/system/config/index'),
  name: 'Config',
  meta: { title: '参数设置', icon: 'edit' }
}

//路由对应的view  system/config/index
export default {
  name: 'Config'
}

一定要保证两着的名字相同，切记写重或者写错。默认如果不写 name 就不会被缓存