vue menu不刷新的解决办法:1、在index页面编写“”;2、将缓存name设置为“test-keep-alive”;3、在router文件配置“{path: '/Material',name: 'Material'...}”即可。

本教程操作环境:Windows10系统、Vue 3版、Dell G3电脑。
vue menu不刷新怎么办?
vue 实现组件切换tab(菜单)页不刷新页面
vue 实现组件切换tab(菜单)页不刷新页面(keep alive)
立即学习“前端免费学习笔记(深入)”;
官网解释
应用场景
比如在做有切换组件的功能的系统时,一般都是在index页面里放置标签,再加上router文件配置的父子组件关系以及路由跳转,实现组件渲染页面。但是这样的效果是每点击一次组件,就会重新渲染一次也面,页面上的数据就不会被保留下来。因此,使用
具体代码
在index页面编写如下代码
// 需要缓存的组件// 不需要缓存的组件
缓存组件name为test-keep-alive的组件 ,这里的include为缓存,exclude为不缓存
// 将缓存name为test-keep-alive的组件// 将缓存name为teat,teat2的组件
在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.js视频教程》










