世界热头条丨vue menu不刷新怎么办

本教程操作环境：Windows10系统、Vue 3版、Dell G3电脑。

vue menu不刷新怎么办？

(相关资料图)

vue 实现组件切换tab（菜单）页不刷新页面

vue 实现组件切换tab(菜单)页不刷新页面（keep alive）

是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。

官网解释

包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和相似，是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。当组件在内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。在 2.2.0 及其更高版本中，activated 和 deactivated 将会在树内的所有嵌套组件中触发。主要用于保留组件状态或避免重新渲染。

应用场景

比如在做有切换组件的功能的系统时，一般都是在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视频教程》

以上就是vue menu不刷新怎么办的详细内容，更多请关注php中文网其它相关文章！

关键词：文件配置刷新页面