最近在開發 Vue3 專案的時候，因為業務需要，存在兩個頁面布局、邏輯等差不多的頁面，本著偷懶??，給同一個路由組件注冊了不同的 path，通過傳遞的路徑引數，執行不同的邏輯以獲取對應的資料，
此時，路由組件包裹了一個 KeepAlive，讓他們保持不被銷毀，
下面是路由注冊情況：
const routes = [
{
name: RouteName.HOME,
path: "/",
component: () => import("./fragments/Common.vue")
},
{
name: RouteName.CATEGORY,
path: "/c/:id/:page",
component: () => import("./fragments/Common.vue")
}
];
這兩個 path 對應的都是同一個路由組件，由于 KeepAlive，當從一個 path 跳轉到 Common.vue 之后，再從另一個 path 跳轉到同一個 Common.vue（??注意，瀏覽器不能重繪的情況下），第二次再進入這個 Common.vue 它還是保持上一次的狀態，存在一個誰先誰后的問題（也就是 mounted），除非強制性重繪瀏覽器，
下面是 Common.vue setup函式中的代碼，fetchData是獲取資料的一個異步函式，根據傳遞的引數而執行不同的 API：
if (categoryId) {
fetchData(categoryId, categoryPage, true);
} else {
fetchData(false, 1, false);
}
來看看組件的周期到底是怎么樣的？
這是第一次進入的 path：
這是第二次進入的 path：
下面是進入不同 path 而是同一個路由組件的生命周期函式觸發情況：
Common.vue 路由組件發生了很多次 activated 和 deactived，唯獨 mounted 只觸發了一次，也就是第一次進入這個路由組件時觸發的，
去掉 KeepAlive 是否可以解決問題呢？但，破壞了我最開始的業務要求，即快取組件狀態，而不希望切換時銷毀路由組件，
不去掉 KeepAlive ？使用 KeepAlive 的周期函式：activated 或 deactived 來執行不同的 API，具體說明請查看官方檔案??：KeepAlive 快取實體的生命周期，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/539181.html
標籤：其他
上一篇：03#JS 工具函式：正則運算式匹配字符，替換該字符，支持多個正則運算式替換
下一篇：異步編程