Solve the problem of Vue single page using keep-alive page return without refreshing

Below I will share with you an article that solves the problem of using keep-alive page return without refreshing in Vue single page. It has a good reference value and I hope it will be helpful to everyone.

I encountered a very disgusting problem when using vue to develop a single-page project: click on a piece of data on the list page to enter the details page, and when you press the return key to return to the list page, the page refreshes. The user experience is very poor! ! ! I checked related issues and used to solve this problem. The following is my experience.

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.

First of all, there is the following code on the App.vue page. We all know that this is where the page is rendered.

<router-view></router-view>

Change this code to the following:

<keep-alive> 
<router-view v-if="$route.meta.keepAlive"></router-view> 
</keep-alive> 
<router-view v-if="!$route.meta.keepAlive"></router-view>

We can see the logical judgment made by this code. When the keepAlive attribute value of the meta attribute of the route is true, the page status is saved. In other cases, the status is not saved.

Then we set the keepAlive attribute value for our route. For example, I set the keepAlive attribute to true for the route on the home page (list page).

{ 
name: 'index', 
path: '/index', 
title: '主页', 
component(resolve) { 
require(['views/index.vue'], resolve) 
}, 
meta: { 
pageTitle: '主页', 
keepAlive: true 
} 
}

After setting this, the status of the homepage will be saved, and the page will not refresh the request data when the return key returns to the homepage.

But there is a problem! ! ! Jumping from the home page to any page, and then returning to the home page will not refresh the page! This is not what I want. I only need to not refresh the page when returning to the list page from the details page. In other cases, it needs to be refreshed, so I need to customize it. The general idea is to set the keepAlive value of the homepage to false when jumping from the homepage to other pages, and set the keepAlive value of the homepage to true when returning to the homepage from the details page. The code is as follows:

Home page jump When going to other pages, set the keepAlive value of the homepage to false

export default {
 data() {
 return {
 };
 },
 mounted() {
 },
 methods: {
 },
 //修改列表页的meta值，false时再次进入页面会重新请求数据。
 beforeRouteLeave(to, from, next) {
 from.meta.keepAlive = false;
 next();
 }
};

When returning to the homepage from the details page, set the keepAlive value of the homepage to true (you have to make a judgment to determine whether you are returning to the homepage)

export default {
 data() {
 return {
 };
 },
 mounted() {
 },
 methods: {
 },
 beforeRouteLeave(to, from, next) {
 if (to.path == "/index") {
 to.meta.keepAlive = true;
 } else {
 to.meta.keepAlive = false;
 }
 next();
 }
};

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to use EL expressions to obtain context parameter values ​​in JS

JS moves the left list to the right List function

Use of el expression in js and non-empty judgment method

The above is the detailed content of Solve the problem of Vue single page using keep-alive page return without refreshing. For more information, please follow other related articles on the PHP Chinese website!