當 vue-router 重新打開頁面時，不會調用 VueJS hook mounted()

Question

請看下面的通量，它顯示了我的問題。 我正在使用帶有this.$router.push的 vue-router 來瀏覽頁面。 我從 PageA 開始。

• PageA -> PageB（調用 PageB 的mounted() ）

• PageB -> PageA（回到PageA）

• PageA -> PageB（不調用 PageB 的mounted() ）

聽起來頁面（.vue 組件）沒有關閉並保存在緩存或其他東西上。 每次打開該頁面時，我都必須使用mounted()方法，並且可能關閉該頁面並從緩存中清除。 我該如何解決？

Answer 1

vue將重用組件成為可能，這是意料之中的。
通常你會觀察路由變化並相應地更新你的組件狀態。

要對路由更改做出反應，您可以使用beforeRouteUpdate() ：

 const Example = Vue.extend({ template: ` <div> <p>This changes: '{{param}}'</p> </div>`, data(){ return { param: this.$route.params.param }; }, beforeRouteUpdate(to, from, next) { this.param = to.params.param; next(); } }); const router = new VueRouter({ routes: [ { path: '/:param', component: Example, } ] }) const app = new Vue({ router }).$mount('#app')

 <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <div id="app"> <router-link to="/foo">foo</router-link><br> <router-link to="/bar">bar</router-link><br> <router-view></router-view> </div>

或者，您也可以查看路線並相應地更新狀態：

Vue.extend({
  watch: {
    '$route'() {
      // TODO: react to navigation event.
      // params cotains the current route parameters
      console.log(this.$route.params);
    }
  },
  // ....
});

vue-router文檔為此提供了一些很好的示例： Data Fetching - Vue Router

如果你仍然想使用mounted() ，你可以通過給你的router-view一個當路由改變時會改變的鍵來實現，例如：

<router-view :key="$route.fullPath"></router-view>

這將強制每次都重新創建組件，因此它確實會降低性能 - 如果可能，我建議使用上述路由掛鈎。

Answer 2

視圖 3

對於那些像我一樣最終在這里查看為什么我沒有在頁面內的組件上卸載調用的人，當路由更改時，這里有一些指導：

假設您有一個使用組件 A 的頁面 A和不使用組件 A 的頁面 B 。

當您第一次打開頁面 A時，組件 A將按預期調用mount方法。

但是，當您導航到Page B 時，Vue3 不會卸載或銷毀Component A ，而是將其停用，並且將調用deactivated方法而不是unmounted 。

一旦您導航回到頁A，成分A將被重新激活和方法激活將被調用，而不是安裝。

Answer 3

對於那些使用Vue 3組合 API的人：

此用例用於在組件安裝和其他依賴項時從 API 獲取數據。 您需要使用watchEffect來自動跟蹤依賴項並在掛載時執行副作用，而不是watch 。

watchEffect(fetchData);

watch(dependencies, callback)將在第一次訪問路由時觸發。 但是如果你 go 到另一個頁面，然后返回它，它不會再次觸發，因為它不把最初的 state 算作更新。 此外，從技術上講，依賴項從安裝時起就沒有改變。

附加條款：

• 如果你來自 React， watch並不完全等同於useEffect 。 watchEffect與它更相似。

• 為了進行比較，此代碼應與watchEffect代碼具有相同的結果。 但watchEffect更簡潔。

onMounted(fetchData);
watch([dependency 1, dependency 2, ...], fetchData);