1. 程式人生 > >Vue 路由切換時頁面內容沒有重新載入

Vue 路由切換時頁面內容沒有重新載入

第二次進入頁面,頁面路由引數已經改變,但是頁面內容不會重新整理。

問題原因:在元件mounted鉤子中呼叫的重新整理頁面內容,但測試發現這個鉤子沒有被呼叫。後來發現App.vue中使用了<keep-alive>:

<template>
  <div id="app">
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

keep-alive是Vue的內建元件,能在元件切換過程中將狀態保留在記憶體中,防止重複渲染DOM。這就是問題所在了。

解決辦法:

使用Vue元件切換過程鉤子activated(keep-alive元件啟用時呼叫),而不是掛載鉤子mounted:

<script>
export default {
  // ...
  activated: function() {
    this.getCase()
  }
}
</script>

關於keep-alive元件的鉤子:https://cn.vuejs.org/v2/api/#activated