Detailed explanation of the caching steps for Vue using specified components

This time I will bring you a detailed explanation of the steps for using vue to cache specified components. What are the precautions for using vue to cache specified components? 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 state or avoid re-rendering.

Usage is also very simple:

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 {}
 }
}

 
 
 
可以保留它的状态或避免重新渲染

 
 
 
可以保留它的状态或避免重新渲染

 
 


 
 



 



 


 
 

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:

However The product always needs to change its requirements, and nothing can 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 {}
 }
}

 
 
 

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 // 不需要被缓存
 }
 }
]

 
 
 


 

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();
 }
};

I believe you have mastered it after reading the case in this article Method, for more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of the use of slots/scoped in Vue

Steps to implement js same-origin policy and cross-domain access Detailed explanation

The above is the detailed content of Detailed explanation of the caching steps for Vue using specified components. For more information, please follow other related articles on the PHP Chinese website!