How to use specified component cache of vue

This time I will bring you how to use vue's specified component cache. What are the precautions for using vue's specified component cache? . The following is a practical case, let's take a look.

keep-alive Introduction

keep-alive is a built-in component of Vue that allows included components to retain their state or avoid re- render.

Usage is also very simple:

<keep-alive>
 <component>
 <!-- 该组件将被缓存！ -->
 </component>
</keep-alive>

props

##include - String or regular expression , only matching components will be cachedexclude - string or
regular expression, any matching components will not be cached

// 组件 a
export default {
 name: 'a',
 data () {
 return {}
 }
}
<keep-alive include="a">
 <component>
 <!-- name 为 a 的组件将被缓存！ -->
 </component>
</keep-alive>可以保留它的状态或避免重新渲染
<keep-alive exclude="a">
 <component>
 <!-- 除了 name 为 a 的组件都将被缓存！ -->
 </component>
</keep-alive>可以保留它的状态或避免重新渲染
<keep-alive include="test-keep-alive">
 <!-- 将缓存name为test-keep-alive的组件 -->
 <component></component>
</keep-alive>
<keep-alive include="a,b">
 <!-- 将缓存name为a或者b的组件，结合动态组件使用 -->
 <component :is="view"></component>
</keep-alive>
<!-- 使用正则表达式，需使用v-bind -->
<keep-alive :include="/a|b/">
 <component :is="view"></component>
</keep-alive>
<!-- 动态判断 -->
<keep-alive :include="includedComponents">
 <router-view></router-view>
</keep-alive>
<keep-alive exclude="test-keep-alive">
 <!-- 将不缓存name为test-keep-alive的组件 -->
 <component></component>
</keep-alive>

meet vue-router

router-view is also a component. If it is directly wrapped in keep-alive, all

view components matching the path will be cached:

<keep-alive>
 <router-view>
 <!-- 所有路径匹配到的视图组件都会被缓存！ -->
 </router-view>
</keep-alive>

However Product owners always have to change their requirements, and they can’t stop it...

Question

What should I do if I only want a certain component in the router-view to be cached? ?

Use include/exclude

Add the router.meta attribute
Use include/exclude

// 组件 a
export default {
 name: 'a',
 data () {
 return {}
 }
}
<keep-alive include="a">
 <router-view>
 <!-- 只有路径匹配到的视图 a 组件会被缓存！ -->
 </router-view>
</keep-alive>

exclude The example is similar.

Disadvantages: Need to know the name of the component, not a good choice when the project is complex

Add router.meta attribute

// routes 配置
export default [
 {
 path: '/',
 name: 'home',
 component: Home,
 meta: {
 keepAlive: true // 需要被缓存
 }
 }, {
 path: '/:id',
 name: 'edit',
 component: Edit,
 meta: {
 keepAlive: false // 不需要被缓存
 }
 }
]
<keep-alive>
 <router-view v-if="$route.meta.keepAlive">
 <!-- 这里是会被缓存的视图组件，比如 Home！ -->
 </router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive">
 <!-- 这里是不被缓存的视图组件，比如 Edit！ -->
</router-view>

Advantages: No need to enumerate the components that need to be Cache component name

[Salt]Use router.meta to expand

Suppose there are 3 routes: A, B, C.

Requirements:

Default display A

B jumps to A, A does not refresh
C jumps to A, A refreshes
Implementation method

In A Set the meta attribute in the route:

{
 path: '/',
 name: 'A',
 component: A,
 meta: {
 keepAlive: true // 需要被缓存
 }
}

Set beforeRouteLeave in the B component:

export default {
 data() {
 return {};
 },
 methods: {},
 beforeRouteLeave(to, from, next) {
  // 设置下一个路由的 meta
 to.meta.keepAlive = true; // 让 A 缓存，即不刷新
 next();
 }
};

Set beforeRouteLeave in the C component:

export default {
 data() {
 return {};
 },
 methods: {},
 beforeRouteLeave(to, from, next) {
 // 设置下一个路由的 meta
 to.meta.keepAlive = false; // 让 A 不缓存，即刷新
 next();
 }
};

In this way, B can return to A. A does not refresh; C returns to A and refreshes.

Summary

The routing method is good, you don’t need to care about which page jumps to, just router.go(-1) can go back , no additional parameters are required.

However, in non-single-page applications, keep-alive cannot be cached effectively = =

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to php Chinese Other related articles online!

Recommended reading:

How to call child components from Angular parent components

How to learn vue for beginners

The above is the detailed content of How to use specified component cache of vue. For more information, please follow other related articles on the PHP Chinese website!