Shulou(Shulou.com)06/03 Report--

This article introduces how to understand the vue3 cache page keep-alive and routing unified processing, the content is very detailed, interested friends can refer to, hope to be helpful to you.

I. Preface

When you use a route to jump to another page, you are required to cache the current page, such as the list page to jump to the details page, the list content needs to be cached, and the location of the scroll bar is saved, and sometimes some of the content in the page that needs to be cached is not cached. in short, in a variety of situations, here are some examples

Vue2 and vue3 are used differently.

The created () method and the mounted () method are executed when the page is initialized. If the page is cached, neither method will be executed again, and if the page is cached, the destroyed () method in vue2 and the unmounted () method in vue3 will not be executed.

The activated () method executes every time you enter the page

2. Use

The difference between 1.vue2 and vue3

Vue2:

Home | About

Vue3:

Home | About

Configuration in route.js:

Path:'/', name: 'Home',component: Home,meta: {keepAlive: true}

Effect:

two。 Some data on the page does not need to be cached

Logic that needs to be partially refreshed can be handled in the activated () method

... Data that needs to be partially refreshed:... data () {return {newStr: "2",};}, mounted () {console.log ("mounted method executed"); this.newStr = "3";}, activated () {console.log ("actived method executed.") ; this.newStr = "4";}

Effect:

3. Set the keepAlive property dynamically

You can also set the keepAlive attribute in the vue file. The actual measurement will not take effect until it is added in the beforeRouteEnter () method, that is, when you enter the page.

Add to the Home.vue:

/ / use the guard in the component to do something about the event of leaving the page. / / to is the route to be redirected. From is the route beforeRouteEnter (to, from, next) for the previous page. {to.meta.keepAlive = true; / / route continues to jump next ();} 4. Configure components that need to be cached using include,exclude

Configure in app.vue:

Where testKA corresponds to the name of a component:

The life cycle of the include attribute matching component name data () {return {}}, activated () {/ / keepalive cached page in export default {keepalive},}

In addition, include is also used as follows:

Exclude is used in the same way as include, representing components that are not cached.

5. Some pages need to be cached and some pages need to be refreshed.

Description: if there are three pages, a-> b, b refreshes the page, then b-> c-> b, b does not refresh the page, and then b-> a-mai a-> b, b refreshes the page.

Self-test can only be achieved with vuex, but the disadvantage is that the activated () method is not executed when the page is cached.

6. Caching only takes effect on first-level routes

If you need to use caching in secondary routing, you can do the same configuration in primary routing

Store.js Code:

State: {keepAlives: []}, mutations: {SET_KEEP_ALIVE (state,params) {state.keepAlives = params}}, getters: {keepAlive:function (state) {return state.keepAlives}}

App.vue Code:

BBB | Home | About export default {computed: {keepAlive () {return this.$store.getters.keepAlive}

Home.vue Code:

/ / use the guard in the component to do something about the event of leaving the page / / to is the route to be redirected. From routes beforeRouteEnter (to, from, next) {next (vm= > {if (from.path = = "/ bbb") {vm.$store.commit ("SET_KEEP_ALIVE", ["Home"])}}) for the previous page. }, beforeRouteLeave (to, from, next) {if (to.path = = "/ about") {console.log ("going to jump / about page...")} else {console.log ("about to jump to non / about page...") This.$store.commit ("SET_KEEP_ALIVE", [])} / / Route continues to jump to next ();}

Effect:

On how to understand the vue3 cache page keep-alive and routing unified processing to share here, I hope the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.