How to implement Vue + Vue-router when the route switching data with the same name is not updated

This article mainly introduces the method of Vue + Vue-router routing switching data with the same name not to be updated. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

By default, switching between routes with the same name will not be executed because the component can be taken and placed in ready to obtain data. There are two ways to solve it

Note: This problem only exists in vue1

Method 1: Put the data acquisition under route.data~

route: {
  data({to: {params: { page }}}) {
    return Promise.all([
      this.getApi()
    ]).then(() => {

    })
  }
}

Method 2: Set route.canReuse = false, force the component not to be reused~

route: {
  canReuse() {
    return false
  }
},
ready() {
  var request = $.ajax({
    type: "POST",
    dataType: 'json',
    url: "api.php"
  });
  request.then((json) => {
    // balabala
  });
}

Related recommendations:

Build vue2 vue-router2 webpack3 engineering tutorial

vue-router routing basic instance sharing

vue-router implements tab page

The above is the detailed content of How to implement Vue + Vue-router when the route switching data with the same name is not updated. For more information, please follow other related articles on the PHP Chinese website!