扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
今天小编给大家分享一下vue menu不刷新如何解决的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。
目前创新互联已为千余家的企业提供了网站建设、域名、网络空间、网站托管维护、企业网站设计、马边彝族网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。
vue menu不刷新的解决办法:1、在index页面编写“
”;2、将缓存name设置为“test-keep-alive”;3、在router文件配置“{path: '/Material',name: 'Material'...}”即可。
vue 实现组件切换tab(菜单)页不刷新页面
vue 实现组件切换tab(菜单)页不刷新页面(keep alive)
官网解释
应用场景
比如在做有切换组件的功能的系统时,一般都是在index页面里放置标签,再加上router文件配置的父子组件关系以及路由跳转,实现组件渲染页面。但是这样的效果是每点击一次组件,就会重新渲染一次也面,页面上的数据就不会被保留下来。因此,使用
具体代码
在index页面编写如下代码
// 需要缓存的组件
缓存组件name为test-keep-alive的组件 ,这里的include为缓存,exclude为不缓存
// 将缓存name为test-keep-alive的组件
在router文件配置如下代码
// 需要缓存的组件
{
path: '/Material',
name: 'Material',
aliasName: '物料信息',
meta:{keepAlive: true}, // 是否缓存组件
component: () => import('../components/Material/index.vue'),
},
{
path: '/Unit',
name: 'Unit',
aliasName: '单位信息',
component: () => import('../components/Unit/index.vue'),
}
以上就是“vue menu不刷新如何解决”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注创新互联行业资讯频道。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流