What should I do if the vue menu does not refresh?

Solution to vue menu not refreshing: 1. Write "" on the index page; 2. Set the cache name to "test-keep-alive"; 3. Configure "{path: '/Material',name: 'Material'...}" in the router file.

#The operating environment of this tutorial: Windows 10 system, Vue version 3, Dell G3 computer.

What should I do if the vue menu does not refresh?

vue implements component switching tab (menu) page without refreshing the page

vue implements component switching tab (menu) page without refreshing the page (keep alive)

is a built-in component of Vue, which can retain the state in the memory during component switching to prevent repeated rendering of the DOM.

Official website explanation

When wrapping dynamic components, inactive component instances will be cached instead of destroying them. Similar to , is an abstract component: it does not render a DOM element by itself, nor does it appear in the parent component chain. When a component is switched within , its two life cycle hook functions, activated and deactivated, will be executed accordingly. In 2.2.0 and higher, activated and deactivated will fire on all nested components within the tree. Mainly used to preserve component state or avoid re-rendering.

Application Scenario

For example, when building a system with the function of switching components, labels are usually placed on the index page, plus the parent-child configuration of the router file. Component relationships and routing jumps enable component rendering of pages. But the effect of this is that every time the component is clicked, the page will be re-rendered, and the data on the page will not be retained. Therefore, using the tag wrapped with the tag can cache inactive components and still have the original information after returning.

Specific code

Write the following code on the index page

// 需要缓存的组件
<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>

The cache component name is the component test-keep-alive, and the include here is cache. , exclude is not cached

// 将缓存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>

Configure the following code in the router file

// 需要缓存的组件
{
    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'),
}

Recommended learning: "vue.js Video Tutorial"

The above is the detailed content of What should I do if the vue menu does not refresh?. For more information, please follow other related articles on the PHP Chinese website!