Summary of the reasons why Vue route backing page does not refresh and solutions

1. Analysis of the root cause of the problem

When Vue routes perform jump operations, the same components will be reused by default. For example, when jumping from page A to page B and then falling back to page A, the components are reused, likecreated、mountedThis type of life cycle hook function will not be triggered again. In this way, the page data cannot be re-acquisitioned and updated, which leads to the problem of unchanged fallback page data.

2. Solution highlights

(I) Listen to route changes and force refresh

Inside the component, forced page refresh under specific conditions can be achieved by listening for routing changes. The sample code is as follows:

watch: {
  $route(to, from) {
    // Determine whether it is a fallback operation and data needs to be refreshed    if ( &amp;&amp;!) {
      this.$nextTick(() =&gt; {
        this.$forceUpdate();
      });
    }
  }
}

In the above code snippet, we use the help ofwatchright$routeConduct monitoring. in,andIt can be used to determine whether it is a situation where data is backed from the cached page and data needs to be refreshed according to the settings of the routing meta information.$nextTickIt can ensure that a forced update operation is performed after the DOM update cycle is over, and$forceUpdateThe component will be forced to be rerendered to finally achieve the purpose of data update.

(II) Use beforeRouteEnter hook

It can be fully utilized in routing componentsbeforeRouteEnterThe hook function handles data update transactions during fallback. Examples are as follows:

beforeRouteEnter(to, from, next) {
  if ( &amp;&amp;!) {
    // You can perform data acquisition and other operations here    // Suppose there is a method called getData to obtain data    const getData = () =&gt; {
      // Simulate to obtain data      const data = {
        // Actual data acquisition logic      };
      return data;
    };
    const data = getData();
    next(vm =&gt; {
       = data;
    });
  } else {
    next();
  }
}

In this hook function, when the conditions for falling back and data need to be updated are met, the data acquisition operation is first performed. Then, with the help ofnextThe callback passes the retrieved data to the component instance to realize the update of the data within the component.

(3) Combining the keep-alive component and activated hook

If used in the projectkeep-aliveComponents can cache pages, so you can also use the help ofactivatedThe hook completes the data update work.
First, make the following settings in the routing configuration:

{
  path: '/pageA',
  name: 'PageA',
  component: PageA,
  meta: {
    keepAlive: true
  }
}

Then, inPageAThe following code is written inside the component:

activated() {
  // Perform data update operation here  ();
},
methods: {
  getData() {
    // Actual data acquisition logic  }
}

When the page is activated from the cache (i.e. fallback to the page),activatedThe hook will be triggered. At this time, the data acquisition method is called in the hook to update the page data.

(IV) Use beforeRouteUpdate hook function

When the route changes and the components are multiplexed (such as the routing parameters or query parameters change, etc.),beforeRouteUpdateThe hook will be called. In response to the problem of page not refresh caused by routing fallback, if the routing parameters or query parameters change during fallback, the data update can be processed in this hook. The sample code is as follows:

beforeRouteUpdate(to, from, next) {
  // Suppose there is a method in the component to getData to obtain data based on routing parameters  ();
  next();
}

In the above example, parameters are used to obtain target routes (that is, routes that fall back to). When the route falls back and the parameters change, the getData method will be called, which can obtain the latest data based on the new parameters and then update the page. For example, on a user details page, the id parameter represents different users. When the id parameter falls back from other pages to the user details page and the id parameter changes, you can get the new user's data and update the page in beforeRouteUpdate.

(V) Use the provide/inject combination

provideandinjectis a pair of options provided by Vue for data transfer between components. When dealing with scenarios where the route backing page does not refresh, you can pass it in the upper component of the routing component (such as )provideProvide a method or data itself for updating data, and then pass through the routing component that needs to update data.injectGet and use.

exist(or other upper component):

export default {
  provide() {
    return {
      updateData: 
    };
  },
  methods: {
    updateData() {
      // Assuming that this is the logic for obtaining data, the actual situation may be more complicated      const data = {
        // Data content      };
      return data;
    }
  }
}

In the routing component:

export default {
  inject: ['updateData'],
  mounted() {
    const data = ();
    //Update page status using the obtained data     = data;
  }
}

When the route falls back to the component, the mounted hook (if the component is not cached) or the activated hook (if the component is kept - alive) will be triggered. At this time, the updateData method can be obtained through inject, called it to obtain the latest data and update the page. This method is more applicable when multiple routing components need to share a data update logic.

(VI) With the help of Vuex status management (if the project uses Vuex)

Vuex is the state management mode of Vue. When the route falls back, the page can be updated by subscribing to the status changes in Vuex in the component. If the relevant state in Vuex is updated during the fallback process, the component can obtain the latest state and re-render.

exist(Vuex store configuration file):

import Vue from 'vue';
import Vuex from 'vuex';
(Vuex);
export default new ({
  state: {
    userData: {}
  },
  mutations: {
    UPDATE_USER_DATA(state, newData) {
       = newData;
    }
  }
});

In the routing component:

import { mapState } from 'vuex';
export default {
  computed: {
 ...mapState(['userData'])
  },
  watch: {
    userData(newData) {
      // Update page according to new userData       = newData;
    }
  }
}

When the userData state is updated by ('UPDATE_USER_DATA', newData) elsewhere (such as some operations during a route jump or rollback process), the watch in the component will listen to changes in userData, thus updating the page. This ensures that when the route falls back, if the status in Vuex is correctly updated, the page can also be updated accordingly.

3. Summary and summary

Through the above methods, we can effectively solve the problem that the page does not refresh after the Vue route jumps and falls back. In the actual project development process, appropriate solutions can be flexibly selected based on the specific needs and application scenarios of the project. Whether it is listening for routing changes, using beforeRouteEnter hooks, combining keep-alive components and activated hooks, or using beforeRouteUpdate hook functions, provide/inject combinations, and Vuex state management, it can effectively improve the user experience and ensure the accuracy and timeliness of page data. At the same time, when processing data update operations, you need to pay attention to performance optimization issues and try your best to avoid unnecessary data retrieval and rendering.

I hope this article can provide useful help to developers who encounter similar problems during Vue development, and help everyone build smoother and higher-quality Vue applications.

The above is the detailed content of the reasons why the Vue route rollback page does not refresh and the solution. For more information about the Vue route rollback page not refresh, please pay attention to my other related articles!