Vue + Vue-router 同名路由切換數(shù)據(jù)不更新的方法

更新時間：2017年11月20日 17:18:33 作者：M.M.F

本篇文章主要介紹了Vue + Vue-router 同名路由切換數(shù)據(jù)不更新的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下

在默認情況下, 同名路由之間的切換, 由于組件可以服用, 放在ready里獲取數(shù)據(jù), 是不會執(zhí)行的, 有兩種方法可以解決

注意: 該問題僅存在于 vue1

方法1: 將數(shù)據(jù)獲取放到route.data下~

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

    })
  }
}

方法2: 設置route.canReuse = false, 強制組件不復用~

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

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

Electron自動更新失效報錯Error:?Object?has?been?destroyed的問題解決
本文主要講解如何解決?Error:?Object?has?been?destroyed?這個?Electron?中最常見的問題,以及?Electron?自動更新的流程,文中通過代碼示例給大家講解的非常詳細,需要的朋友可以參考下
2024-01-01
vue使用npm發(fā)布自己的公網(wǎng)包
本文主要介紹了vue使用npm發(fā)布自己的公網(wǎng)包,通過創(chuàng)建一個簡單的npm包,本文詳細闡述了從創(chuàng)建到發(fā)布的整個過程,具有一定的參考價值,感興趣的可以了解一下
2023-08-08
element-ui配合node實現(xiàn)自定義上傳文件方式
這篇文章主要介紹了element-ui配合node實現(xiàn)自定義上傳文件方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-09-09
vue中@click如何綁定多個事件
這篇文章主要介紹了vue中@click如何綁定多個事件問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-11-11
vue項目接口訪問地址設置方式
這篇文章主要介紹了vue項目接口訪問地址設置方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-11-11
webpack4打包vue前端多頁面項目
這篇文章主要介紹了webpack4打包vue前端多頁面項目的相關知識，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
2018-09-09
基于vue,vue-router, vuex及addRoutes進行權(quán)限控制問題
這篇文章主要介紹了基于vue，vue-router, vuex及addRoutes進行權(quán)限控制問題,需要的朋友可以參考下
2018-05-05
Vue項目業(yè)務邏輯模塊介紹
這篇文章主要介紹了Vue項目業(yè)務邏輯，不同的項目有不同的功能，不同的功能需要不同的實現(xiàn)，實現(xiàn)這些核心功能的代碼就叫業(yè)務邏輯。所以說業(yè)務邏輯是指一個實體單元為了向另一個實體單元提供服務，應該具備的規(guī)則與流程
2022-11-11
vue組件表單數(shù)據(jù)回顯驗證及提交的實例代碼
今天小編就為大家分享一篇vue組件表單數(shù)據(jù)回顯驗證及提交的實例代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-08-08
Vue組件間的雙向綁定示例解析
這篇文章主要介紹了Vue組件間的雙向綁定，我們都知道當父組件改變了某個值后，如果這個值傳給了子組件，那么子組件也會自動跟著改變，但是這是單向的，使用v-bind的方式，即子組件可以使用父組件的值，但是不能改變這個值
2023-03-03