vue menu不刷新的解决办法：1、在index页面编写“6a1fb2b11ee7089d63e9f58db8b2c985dd6e4ababe59793a4ac75fb9e5c5550e”；2、将缓存name设置为“test-keep-alive”；3、在router文件配置“{path: '/material',name: 'material'...}”即可。
本教程操作环境：windows10系统、vue 3版、dell g3电脑。
vue menu不刷新怎么办？
vue 实现组件切换tab（菜单）页不刷新页面
vue 实现组件切换tab(菜单)页不刷新页面（keep alive）
7c9485ff8c3cba5ae9343ed63c2dc3f7是vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染dom。
官网解释
7c9485ff8c3cba5ae9343ed63c2dc3f7包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 相似， 是一个抽象组件：它自身不会渲染一个 dom 元素，也不会出现在父组件链中。 当组件在 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。 在 2.2.0 及其更高版本中，activated 和 deactivated 将会在 树内的所有嵌套组件中触发。 主要用于保留组件状态或避免重新渲染。
应用场景
比如在做有切换组件的功能的系统时，一般都是在index页面里放置标签，再加上router文件配置的父子组件关系以及路由跳转，实现组件渲染页面。但是这样的效果是每点击一次组件，就会重新渲染一次也面，页面上的数据就不会被保留下来。因此，使用7c9485ff8c3cba5ae9343ed63c2dc3f7标签包裹着62fd61a4bda39e5f3eeccf86eb0f077c标签就可以实现把不活动的组件缓存下来，返回后仍有原来的信息 。
具体代码
在index页面编写如下代码
// 需要缓存的组件<keep-alive v-if="showview"> <router-view v-if="$route.meta.keepalive"></router-view></keep-alive>// 不需要缓存的组件<router-view v-if="!$route.meta.keepalive"></router-view>
缓存组件name为test-keep-alive的组件 ，这里的include为缓存，exclude为不缓存
// 将缓存name为test-keep-alive的组件<keep-alive include="test-keep-alive"> <component></component></keep-alive>// 将缓存name为teat,teat2的组件<keep-alive include="teat,teat2"> <component></component></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.js视频教程》
以上就是vue menu不刷新怎么办的详细内容。