vue 前端进行tab页面切换时,要求不刷新
项目中TagsView组件用于tab页面切换,在项目中已使用keep-alive,目标页面也开启了“缓存”标志,但是在tab标签点击切换时,有几个页面数据还是刷新了。查找了相关资料,最终找到了一个【页签缓存】的资料,原来主要的问题就出在 “path” 和 “name” 没有完全匹配。【页签缓存】由于目前 keep-alive 和 router-view 是强耦合的,而且查看文档和源码不难发现 ke
·
项目中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 就不会被缓存
更多推荐
已为社区贡献4条内容
所有评论(0)