vue3動態(tài)路由+動態(tài)組件+緩存應用方式

更新時間：2025年04月25日 09:35:28 作者：放逐者-保持本心，方可放逐

這篇文章主要介紹了vue3動態(tài)路由+動態(tài)組件+緩存應用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

Vue3 案例復現(xiàn)（動態(tài)注冊組件及路由重定向）

1. 項目結構

假設項目有src目錄，src目錄下包含views（存放組件）、router（存放路由相關文件）和store（用于狀態(tài)管理，這里假設使用 Vuex）。

2. Vuex 存儲相關信息（src/store/index.js）

import { createStore } from 'vuex';

const store = createStore({
    state: {
        userRole: null,  // 存儲用戶角色，如 'user' 或 'admin'
        permissions: []  // 存儲用戶權限列表
    },
    mutations: {
        SET_USER_ROLE(state, role) {
            state.userRole = role;
        },
        SET_PERMISSIONS(state, perms) {
            state.permissions = perms;
        }
    },
    actions: {
        setUserRole({ commit }, role) {
            commit('SET_USER_ROLE', role);
        },
        setPermissions({ commit }, perms) {
            commit('SET_PERMISSIONS', perms);
        }
    }
});

export default store;

3. 動態(tài)注冊組件示例（src/router/index.js）

import { createRouter, createWebHistory } from 'vue-router';
import store from '../store';
import Home from '../views/Home.vue';
import Login from '../views/Login.vue';

// 動態(tài)導入組件函數(shù)
const loadComponent = (path) => () => import(`../views/${path}.vue`);

const router = createRouter({
    history: createWebHistory(),
    routes: [
        {
            path: '/',
            redirect: '/login'
        },
        {
            path: '/login',
            component: Login
        },
        {
            path: '/home',
            component: Home
        }
    ]
});

// 模擬獲取用戶角色和權限后動態(tài)注冊路由
const updateRoutes = () => {
    const userRole = store.state.userRole;
    const newRoutes = [];
    if (userRole === 'admin') {
        newRoutes.push({
            path: '/admin/dashboard',
            component: loadComponent('AdminDashboard')
        });
    }
    if (userRole === 'user') {
        newRoutes.push({
            path: '/user/profile',
            component: loadComponent('UserProfile')
        });
    }
    router.addRoute(...newRoutes);
};

// 路由守衛(wèi)，在每次路由變化前檢查用戶角色和權限，更新路由
router.beforeEach((to, from, next) => {
    const userRole = store.state.userRole;
    if (!userRole && to.path!== '/login') {
        next('/login');
    } else {
        if (userRole) {
            updateRoutes();
        }
        next();
    }
});

export default router;

4. 登錄組件（src/views/Login.vue）

<template>
    <div>
        <h2>Login</h2>
        <input type="text" v-model="username" placeholder="Username" />
        <input type="password" v-model="password" placeholder="Password" />
        <button @click="login">Login</button>
    </div>
</template>

<script>
import { useStore } from 'vuex';
export default {
    data() {
        return {
            username: '',
            password: ''
        };
    },
    methods: {
        login() {
            const store = useStore();
            // 模擬登錄驗證，這里簡單假設用戶名為 'admin' 時是管理員角色
            if (this.username === 'admin') {
                store.dispatch('setUserRole', 'admin');
                store.dispatch('setPermissions', ['admin:dashboard']);
            } else {
                store.dispatch('setUserRole', 'user');
                store.dispatch('setPermissions', ['user:profile']);
            }
        }
    }
};
</script>

在這個示例中：

通過 Vuex 存儲用戶角色和權限信息。
在路由模塊中，loadComponent函數(shù)用于動態(tài)導入組件。updateRoutes函數(shù)根據(jù)用戶角色動態(tài)添加路由。
路由守衛(wèi)beforeEach在每次路由變化前檢查用戶狀態(tài)，如果用戶未登錄且不是訪問登錄頁，則重定向到登錄頁。如果用戶已登錄，則根據(jù)用戶角色更新路由，實現(xiàn)動態(tài)注冊組件和動態(tài)控制路由重定向。實際應用中，可以從后端獲取真實的用戶角色和權限數(shù)據(jù)。

動態(tài)組件

動態(tài)組件基礎概念

在Vue 3中，動態(tài)組件允許你根據(jù)數(shù)據(jù)的變化動態(tài)地切換顯示的組件。
這是通過<component>標簽來實現(xiàn)的，它有一個特殊的屬性:is，這個屬性的值可以是一個組件選項對象（例如，通過import導入的組件）或者組件的名字（如果組件是通過app.component()方法全局注冊的）。

簡單的動態(tài)組件示例

創(chuàng)建組件

首先，在src/views目錄下創(chuàng)建幾個組件，例如Home.vue、Profile.vue和Admin.vue。

以Home.vue為例：

<template>
  <div>
    <h2>Home Page</h2>
  </div>
</template>
<script>
export default {
  name: 'Home'
};
</script>

在父組件中使用動態(tài)組件

在src/App.vue（假設這是父組件）中使用動態(tài)組件：

<template>
  <div>
    <component :is="currentComponent"></component>
    <button @click="changeComponent('Home')">Go to Home</button>
    <button @click="changeComponent('Profile')">Go to Profile</button>
    <button @click="changeComponent('Admin')">Go to Admin</button>
  </div>
</template>
<script>
import Home from './views/Home.vue';
import Profile from './views/Profile.vue';
import Admin from './views/Admin.vue';
import { ref } from 'vue';
export default {
  setup() {
    const components = {
      Home,
      Profile,
      Admin
    };
    const currentComponent = ref('Home');
    const changeComponent = (componentName) => {
      currentComponent.value = componentName;
    };
    return {
      currentComponent,
      changeComponent
    };
  }
};
</script>

在這個示例中，currentComponent是一個ref，它存儲了當前要顯示的組件的名字。

changeComponent函數(shù)用于根據(jù)按鈕點擊事件來改變currentComponent的值，從而切換顯示的組件。
<component :is="currentComponent"></component>會根據(jù)currentComponent的值動態(tài)地渲染相應的組件。

結合路由使用動態(tài)組件（動態(tài)路由組件）

路由配置

在src/router/index.js中配置路由，假設你已經(jīng)安裝并配置了vue - router：

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import Profile from '../views/Profile.vue';
import Admin from '../views/Admin.vue';
const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      redirect: '/home'
    },
    {
      path: '/home',
      component: Home
    },
    {
      path: '/profile',
      component: Profile
    },
    {
      path: '/admin',
      component: Admin
    }
  ]
});
export default router;

在路由組件中使用動態(tài)組件（嵌套動態(tài)組件）

假設在Profile.vue組件中，你還想根據(jù)用戶的不同設置（例如用戶的不同狀態(tài)或者權限）動態(tài)地顯示內(nèi)部組件。首先，在src/views目錄下創(chuàng)建UserProfile.vue和CompanyProfile.vue組件。

然后在Profile.vue中使用動態(tài)組件：

<template>
  <div>
    <h2>Profile Page</h2>
    <component :is="innerComponent"></component>
    <button @click="changeInnerComponent('UserProfile')">User Profile</button>
    <button @click="changeInnerComponent('CompanyProfile')">Company Profile</button>
  </div>
</template>
<script>
import UserProfile from './UserProfile.vue';
import CompanyProfile from './CompanyProfile.vue';
import { ref } from 'vue';
export default {
  setup() {
    const innerComponents = {
      UserProfile,
      CompanyProfile
    };
    const innerComponent = ref('UserProfile');
    const changeInnerComponent = (componentName) => {
      innerComponent.value = componentName;
    };
    return {
      innerComponent,
      changeInnerComponent
    };
  }
};
</script>

這樣，當用戶訪問/profile路由時，會先顯示Profile.vue組件，然后在Profile.vue內(nèi)部，又可以根據(jù)用戶操作動態(tài)地顯示UserProfile.vue或者CompanyProfile.vue組件。

動態(tài)加載組件（異步組件）

原理

對于大型應用或者有性能優(yōu)化需求的場景，你可能不希望一次性加載所有組件，而是在需要的時候再加載。

Vue 3支持異步加載組件，通過import()函數(shù)來實現(xiàn)。import()函數(shù)返回一個Promise，當Promise被解決時，組件就被加載完成。

示例

在src/router/index.js中修改路由配置，以Admin.vue為例，將其改為異步加載：

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import Profile from '../views/Profile.vue';
const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      redirect: '/home'
    },
    {
      path: '/home',
      component: Home
    },
    {
      path: '/profile',
      component: Profile
    },
    {
      path: '/admin',
      component: () => import('../views/Admin.vue')
    }
  ]
});
export default router;

這樣，Admin.vue組件只有在用戶訪問/admin路由時才會被加載，減少了初始加載時間和資源占用。同時，你也可以在組件內(nèi)部結合動態(tài)組件和異步加載，實現(xiàn)更復雜的動態(tài)組件設置。

vue3 中動態(tài)路由應用

Vue 3 動態(tài)路由應用場景

用戶信息展示

場景描述：當有一個用戶管理系統(tǒng)，需要查看每個用戶的詳細信息。不同用戶有不同的用戶 ID，通過動態(tài)路由可以根據(jù)用戶 ID 加載特定用戶的資料頁面。
示例：路由可以定義為/user/:id，其中:id是動態(tài)參數(shù)。在用戶列表頁面，每個用戶的鏈接可以是/user/1、/user/2等，點擊鏈接后會跳轉(zhuǎn)到對應的用戶詳情頁面，頁面根據(jù)傳入的id從后端獲取并展示該用戶的信息。

分類內(nèi)容展示

場景描述：在一個博客系統(tǒng)或者電商系統(tǒng)中，有不同的分類，每個分類下有多個內(nèi)容項。通過動態(tài)路由可以根據(jù)分類 ID 或名稱來展示該分類下的內(nèi)容。
示例：比如電商系統(tǒng)中，路由/category/:categoryName，可以有/category/electronics、/category/clothing等。點擊這些鏈接后，對應的商品列表頁面會根據(jù)傳入的分類名稱從數(shù)據(jù)庫中獲取并展示該分類下的商品。

多語言支持

場景描述：網(wǎng)站需要支持多種語言，根據(jù)不同的語言代碼加載相應的語言包和頁面內(nèi)容。
示例：路由/lang/:languageCode，如/lang/en、/lang/zh，頁面組件根據(jù)languageCode動態(tài)加載對應的語言文本資源和顯示相應的界面布局。

Vue 3 動態(tài)路由實例

項目準備

創(chuàng)建一個 Vue 3 項目，可以使用vue - cli或者vite等工具。
假設項目結構有src目錄，src下有views（存放頁面組件）、router（存放路由相關文件）。

路由配置（src/router/index.js）

import { createRouter, createWebHistory } from 'vue-router';
import UserProfile from '../views/UserProfile.vue';
import ProductList from '../views/ProductList.vue';
import NotFound from '../views/NotFound.vue';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/user/:id',
      component: UserProfile,
      props: true
    },
    {
      path: '/product/:category',
      component: ProductList,
      props: true
    },
    {
      path: '/:pathMatch(.*)*',
      component: NotFound
    }
  ]
});

export default router;

用戶資料組件（src/views/UserProfile.vue）

<template>
  <div>
    <h2>User Profile for ID: {{ id }}</h2>
    <!-- 這里可以根據(jù) id 從后端獲取用戶數(shù)據(jù)并展示，比如姓名、年齡等信息 -->
  </div>
</template>

<script>
export default {
  props: ['id'],
  setup(props) {
    return {
      id: props.id
    };
  }
};
</script>

產(chǎn)品列表組件（src/views/ProductList.vue）

<template>
  <div>
    <h2>Products in Category: {{ category }}</h2>
    <!-- 根據(jù) category 從后端獲取商品列表并展示 -->
  </div>
</template>

<script>
export default {
  props: ['category'],
  setup(props) {
    return {
      category: props.category
    };
  }
};
</script>

404 組件（src/views/NotFound.vue）

<template>
  <div>
    <h2>404 - Page Not Found</h2>
  </div>
</template>

在App.vue中使用路由鏈接（src/App.vue）

<template>
  <div id="app">
    <router-link :to="{ name: 'userProfile', params: { id: 1 }}">User 1 Profile</router-link>
    <router-link :to="{ name: 'userProfile', params: { id: 2 }}">User 2 Profile</router-link>
    <br>
    <router-link :to="{ name: 'productList', params: { category: 'electronics' }}">Electronics Products</router-link>
    <router-link :to="{ name: 'productList', params: { category: 'clothing' }}">Clothing Products</router-link>
    <router-view></router-view>
  </div>
</template>

在這個實例中：

路由配置了兩個動態(tài)路由/user/:id和/product/:category，分別用于用戶資料展示和產(chǎn)品列表展示。
對應的UserProfile和ProductList組件通過props接收動態(tài)參數(shù)，并可以在組件內(nèi)部進行進一步操作。
App.vue中使用router - link創(chuàng)建了指向不同動態(tài)路由的鏈接，方便用戶導航。同時，還有一個404頁面用于處理未匹配的路由。

removeRoute 以及 hasRoute

removeRoute應用場景及實例

應用場景

權限變更：當用戶的權限發(fā)生變化，某些路由不再可用時，需要從路由表中移除這些路由。例如，用戶從管理員權限降級為普通用戶權限，之前管理員權限下的特定路由（如系統(tǒng)設置、用戶管理等路由）需要被移除。
模塊卸載：在一個復雜的單頁應用中，如果有一些可插拔的模塊，當這些模塊被卸載時，相關的路由也應該被移除。比如一個電商應用中的促銷活動模塊，活動結束后，相關的促銷活動路由（如/promotion/:id）應該被移除。

實例

假設我們有一個簡單的應用，包含一個管理員路由/admin/dashboard，用戶最初以管理員身份登錄，后來權限變更為普通用戶。
在src/router/index.js中，路由配置如下：

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import AdminDashboard from '../views/AdminDashboard.vue';
const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      redirect: '/home'
    },
    {
      path: '/home',
      component: Home
    },
    {
      path: '/admin/dashboard',
      component: AdminDashboard
    }
  ]
});
export default router;

在src/store/index.js（假設使用Vuex來管理狀態(tài)）中，當用戶權限變更時，觸發(fā)removeAdminRoute動作：

import { createStore } from 'vuex';
export default createStore({
  state: {
    userRole: 'admin'
  },
  mutations: {
    CHANGE_USER_ROLE(state, role) {
      state.userRole = role;
    }
  },
  actions: {
    removeAdminRoute({ state, commit }, newRole) {
      const router = require('../router/index.js').default;
      if (state.userRole === 'admin' && newRole!== 'admin') {
        router.removeRoute('adminDashboard');
        commit('CHANGE_USER_ROLE', newRole);
      }
    }
  }
});

在src/App.vue（或其他合適的地方），模擬權限變更：

<template>
  <div>
    <button @click="changeUserRole('user')">Change to User Role</button>
    <router - view></router - view>
  </div>
</template>
<script>
import { useStore } from 'vuex';
export default {
  setup() {
    const store = useStore();
    const changeUserRole = (role) => {
      store.dispatch('removeAdminRoute', role);
    };
    return {
      changeUserRole
    };
  }
};
</script>

hasRoute應用場景及實例

應用場景：

路由檢查與導航引導：在進行頁面導航之前，可以使用hasRoute來檢查目標路由是否存在。這在復雜的路由嵌套或者動態(tài)添加/刪除路由的場景中非常有用。例如，在一個多模塊應用中，一個模塊可能會動態(tài)添加一些路由，另一個模塊在導航時需要確認這些路由是否已經(jīng)添加，以避免出現(xiàn)404錯誤。
權限檢查與路由隱藏：除了在導航過程中檢查路由是否存在，還可以結合用戶權限來檢查是否有特定的路由。如果用戶沒有訪問某個路由的權限，并且該路由也不存在于當前路由表中（可能已經(jīng)被移除），可以在界面上隱藏相關的導航鏈接，提供更好的用戶體驗。

實例：

假設我們有一個應用，有兩個模塊：ModuleA和ModuleB。ModuleA會動態(tài)添加一個路由/moduleA/special，ModuleB在導航到/moduleA/special之前需要檢查該路由是否存在。
在src/router/index.js中，初始路由配置：

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import ModuleA from '../views/ModuleA.vue';
const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      redirect: '/home'
    },
    {
      path: '/home',
      component: Home
    },
    {
      path: '/moduleA',
      component: ModuleA
    }
  ]
});
export default router;

在ModuleA.vue中，動態(tài)添加路由：

<template>
  <div>
    <h2>Module A</h2>
    <button @click="addSpecialRoute">Add Special Route</button>
  </div>
</template>
<script>
import { createRouter, createWebHistory } from 'vue-router';
import SpecialPage from '../views/SpecialPage.vue';
export default {
  setup() {
    const addSpecialRoute = () => {
      const router = createRouter({
        history: createWebHistory(),
        routes: [
          {
            path: '/moduleA/special',
            component: SpecialPage,
            name:'moduleASpecial'
          }
        ]
      });
      router.addRoute('/moduleA', {
        path: '/moduleA/special',
        component: SpecialPage,
        name:'moduleASpecial'
      });
    };
    return {
      addSpecialRoute
    };
  }
};
</script>

在ModuleB.vue（假設是一個導航組件）中，檢查路由是否存在并進行導航：

<template>
  <div>
    <h2>Module B</h2>
    <button @click="navigateToSpecialRoute">
    Navigate to Special Route in Module A
    </button>
  </div>
</template>
<script>
import { useRouter } from 'vue-router';
export default {
  setup() {
    const router = useRouter();
    const navigateToSpecialRoute = () => {
      if (router.hasRoute('moduleASpecial')) {
        router.push('/moduleA/special');
      } else {
        console.log('Route does not exist.');
      }
    };
    return {
      navigateToSpecialRoute
    };
  }
  }
};
</script>

思考（當頁面被刷新時store 數(shù)據(jù)會被重置，怎么保持登錄狀態(tài)，并建立當前緩存）

使用瀏覽器本地存儲（Local Storage或Session Storage）保存登錄狀態(tài)相關數(shù)據(jù)

原理：

瀏覽器的本地存儲可以在頁面刷新或關閉后仍然保留數(shù)據(jù)。當用戶登錄成功后，將用戶的登錄狀態(tài)（如登錄令牌、用戶信息等）存儲到本地存儲中。
在頁面加載時，從本地存儲中讀取這些數(shù)據(jù)來恢復登錄狀態(tài)。

示例（使用Vuex和Local Storage）

存儲登錄狀態(tài)到本地存儲（在登錄成功的邏輯中）

import { setItem } from '../utils/localStorageUtil'; // 假設這個函數(shù)用于設置本地存儲的值
export const login = ({ commit }, user) => {
  // 模擬登錄成功后的邏輯，比如獲取用戶令牌
  const token = 'generated_token';
  // 將令牌和用戶信息存儲到本地存儲
  setItem('userToken', token);
  setItem('userInfo', user);
  commit('SET_USER', user);
  commit('SET_LOGGED_IN', true);
};

在src/store/actions.js（假設將登錄相關動作放在單獨的文件中）中，修改登錄動作：

從本地存儲中恢復登錄狀態(tài)（在應用初始化時）

import { getItem } from '../utils/localStorageUtil';
import { createApp } from 'vue';
import store from './store';
import App from './App.vue';
import router from './router';
const app = createApp(App);
const userToken = getItem('userToken');
const userInfo = getItem('userInfo');
if (userToken && userInfo) {
  store.commit('SET_USER', userInfo);
  store.commit('SET_LOGGED_IN', true);
}
app.use(store).use(router).mount('#app');

在src/main.js中，在創(chuàng)建Vue應用之前，檢查本地存儲中的登錄狀態(tài)并恢復：

利用Vuex - Persistedstate插件持久化存儲狀態(tài)

原理：

vuex - persistedstate插件可以自動將Vuex的狀態(tài)保存到本地存儲或者其他存儲介質(zhì)中，并在應用重新加載時恢復狀態(tài)。
它通過訂閱Vuex的變化，將狀態(tài)數(shù)據(jù)序列化后存儲，在初始化時再反序列化并恢復狀態(tài)。

示例：

安裝插件：

npm install vuex - persistedstate

首先，安裝vuex - persistedstate：

配置插件（在src/store/index.js中）

import { createStore } from 'vuex';
import createPersistedState from 'vuex - persistedstate';
const store = createStore({
  state: {
    user: null,
    loggedIn: false
  },
  mutations: {
    SET_USER(state, user) {
      state.user = user;
    },
    SET_LOGGED_IN(state, loggedIn) {
      state.loggedIn = loggedIn;
    }
  },
  plugins: [
    createPersistedState({
      storage: window.localStorage,
      paths: ['user', 'loggedIn']
    })
  ]
});
export default store;

在這個配置中，createPersistedState插件會將user和loggedIn這兩個狀態(tài)屬性保存到本地存儲中，并且在頁面刷新后從本地存儲中恢復這些狀態(tài)。

建立緩存機制（以路由組件緩存為例）

原理：

對于一些不需要每次都重新加載的頁面組件（比如用戶資料頁面，在用戶登錄狀態(tài)不變的情況下內(nèi)容不會改變），可以使用Vue的keep - alive組件來緩存。
keep - alive會將包裹的組件實例緩存起來，下次再訪問該組件時，會直接使用緩存的實例，而不是重新創(chuàng)建。

示例（在路由視圖中緩存組件）：

在src/App.vue中，使用keep - alive包裹router - view：

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

這樣，在路由切換時，如果是已經(jīng)訪問過的組件，會優(yōu)先從緩存中獲取，減少了組件重新加載的次數(shù)，對于保持頁面狀態(tài)（如表單填寫狀態(tài)、滾動位置等）也很有幫助。
不過要注意，對于一些數(shù)據(jù)可能會變化的組件，需要正確地處理緩存更新的情況，比如通過activated和deactivated生命周期鉤子來更新數(shù)據(jù)。

keep-alive

keep - alive實例應用場景

多標簽頁系統(tǒng)（Tab System）

場景描述：在一個類似瀏覽器標簽頁的應用界面中，用戶可以在多個頁面（標簽）之間切換。這些頁面可能包含表單、圖表、列表等各種內(nèi)容。例如，一個數(shù)據(jù)管理系統(tǒng)，用戶可以在“用戶列表”“數(shù)據(jù)報表”“系統(tǒng)設置”等多個標簽頁之間切換。
keep - alive優(yōu)勢：使用keep - alive可以緩存這些標簽頁對應的組件。當用戶切換回之前訪問過的標簽頁時，組件不需要重新渲染，能夠快速恢復之前的狀態(tài)，提供流暢的用戶體驗。例如，“用戶列表”標簽頁中的搜索條件、滾動位置和選中的行等信息都能得以保留。

向?qū)奖韱危╓izard - style Forms）

場景描述：在一個包含多個步驟的表單應用中，如電商平臺的購物流程（包括購物車、收貨地址、支付方式等步驟）或用戶注冊流程（包含基本信息、驗證信息、興趣愛好等步驟）。
keep - alive優(yōu)勢：將每個步驟對應的組件用keep - alive包裹，可以在用戶來回切換步驟時，保持每個步驟表單中已填寫的數(shù)據(jù)和狀態(tài)。這樣可以避免用戶因為頁面重新加載而丟失數(shù)據(jù)，減少用戶的操作成本和煩躁情緒。

復雜的圖表展示（Complex Chart Display）

場景描述：在數(shù)據(jù)可視化應用中，有多種復雜的圖表，如柱狀圖、折線圖、餅圖等，這些圖表可能需要從后端獲取數(shù)據(jù)并進行渲染，而且用戶可能會頻繁切換查看不同類型的圖表。
keep - alive優(yōu)勢：通過keep - alive緩存圖表組件，當用戶切換回之前查看過的圖表時，不需要重新獲取數(shù)據(jù)和重新渲染圖表，能夠快速顯示之前的圖表狀態(tài)，提高應用的響應速度，特別是在數(shù)據(jù)量較大或者獲取數(shù)據(jù)的接口響應較慢的情況下，這種優(yōu)勢更加明顯。

keep - alive注意點總結：

keep-alive（exclude / include）

生命周期鉤子的變化

activated和deactivated鉤子：被keep - alive包裹的組件會新增activated和deactivated生命周期鉤子。activated鉤子在組件從緩存中激活時調(diào)用，deactivated鉤子在組件被緩存（切換到其他組件）時調(diào)用。在這些鉤子中，可以進行一些特定的操作，比如在activated鉤子中重新獲取數(shù)據(jù)（如果數(shù)據(jù)可能已經(jīng)更新），或者在deactivated鉤子中暫停一些定時器或動畫。
與其他生命周期鉤子的關系：需要注意的是，當組件被緩存時，mounted等生命周期鉤子不會再次觸發(fā)，除非組件被重新創(chuàng)建（例如緩存被清除或者組件對應的v - node被重新創(chuàng)建）。這意味著如果組件的初始化操作放在mounted鉤子中，并且組件被緩存，這些操作可能不會在每次顯示組件時執(zhí)行，需要根據(jù)情況調(diào)整到activated鉤子或者其他合適的地方。

組件狀態(tài)更新與緩存更新

數(shù)據(jù)更新問題：如果緩存的組件中的數(shù)據(jù)可能會被其他組件或全局狀態(tài)的變化所影響，需要考慮如何正確地更新緩存組件中的數(shù)據(jù)。一種方法是在activated鉤子中檢查數(shù)據(jù)是否需要更新，并根據(jù)需要重新獲取數(shù)據(jù)或者更新數(shù)據(jù)。另一種方法是使用響應式數(shù)據(jù)（如Vuex中的狀態(tài)或者ref/reactive對象），并在數(shù)據(jù)變化時通過合適的方式通知緩存組件進行更新。
動態(tài)組件與keep - alive：當keep - alive包裹動態(tài)組件時，需要特別注意組件的切換和緩存更新。如果動態(tài)組件的類型或者屬性發(fā)生變化，可能需要考慮如何處理緩存中的舊組件實例。例如，可以在動態(tài)組件切換時，清除舊組件的緩存或者根據(jù)新的組件屬性更新緩存中的組件。

緩存的清除與管理

手動清除緩存：在某些情況下，可能需要手動清除keep - alive的緩存。例如，當用戶執(zhí)行了某個操作（如退出登錄或者更新了某些關鍵數(shù)據(jù)）后，希望重新加載所有組件，而不是使用緩存?？梢酝ㄟ^keep - alive組件提供的exclude或include屬性來控制哪些組件被緩存，或者通過編程方式（如在Vuex的mutation或action中）清除緩存。
緩存大小和性能考慮：如果緩存的組件過多或者組件本身占用內(nèi)存較大，可能會影響應用的性能。需要根據(jù)應用的實際情況，合理地選擇要緩存的組件，并考慮緩存的生命周期和清除策略，以避免內(nèi)存泄漏或者性能下降的問題。

keep - alive基礎回顧

keep - alive是Vue.js中的一個組件，用于緩存內(nèi)部的組件。
當組件在keep - alive內(nèi)部被切換時，它們不會被銷毀，而是被緩存起來，下次再顯示時可以快速恢復，減少重新渲染的時間。

include屬性應用實例

場景描述：

假設我們有一個應用，有三個路由組件：Home.vue、Profile.vue和Settings.vue。
我們希望只緩存Home.vue和Profile.vue組件，因為Settings.vue組件的內(nèi)容可能會經(jīng)常變化，每次進入都希望重新加載。

代碼實現(xiàn)：

在App.vue文件中：

<template>
  <div id="app">
    <keep - alive :include="['Home', 'Profile']">
      <router - view></router - view>
    </keep - alive>
  </div>
</template>
<script>
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'App'
});
</script>

這里的include屬性是一個數(shù)組，數(shù)組中的元素是要被緩存的組件的名稱。
在這個例子中，只有名稱為Home和Profile的組件會被keep - alive緩存。需要注意的是，組件名稱是在組件定義時通過name屬性指定的。
例如，在Home.vue組件中應該有如下定義：

<template>
  <div>
    Home Component
  </div>
</template>
<script>
export default {
  name: 'Home'
};
</script>

exclude屬性應用實例：

場景描述：

假設我們有同樣的三個路由組件，但是我們希望緩存除了Settings.vue之外的所有組件。
這種情況可以使用exclude屬性。

代碼實現(xiàn)：

在App.vue文件中：

<template>
  <div id="app">
    <keep - alive :exclude="['Settings']">
      <router - view></router - view>
    </keep - alive>
  </div>
</template>
<script>
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'App'
});
</script>

這里的exclude屬性也是一個數(shù)組，數(shù)組中的元素是不被緩存的組件的名稱。
在這個例子中，名稱為Settings的組件不會被keep - alive緩存，而Home.vue和Profile.vue組件會被緩存。

結合動態(tài)組件的應用實例（進階）

場景描述：

假設我們有一個頁面，里面有一個動態(tài)組件，根據(jù)用戶的選擇可以切換不同的子組件，如ComponentA.vue、ComponentB.vue和ComponentC.vue。
我們希望根據(jù)用戶的權限來決定哪些組件可以被緩存。
例如，普通用戶只能看到ComponentA.vue和ComponentB.vue，并且只有ComponentA.vue可以被緩存；管理員可以看到所有組件，并且ComponentB.vue和ComponentC.vue可以被緩存。

代碼實現(xiàn)：

在父組件（假設為Parent.vue）中：

<template>
  <div>
    <keep - alive :include="cachedComponents">
      <component :is="currentComponent"></component>
    </keep - alive>
    <button @click="changeComponent('ComponentA')">Show ComponentA</button>
    <button @click="changeComponent('ComponentB')">Show ComponentB</button>
    <button @click="changeComponent('ComponentC')">Show ComponentC</button>
  </div>
</template>
<script>
import { defineComponent, ref } from 'vue';
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';
import ComponentC from './ComponentC.vue';
export default defineComponent({
  setup() {
    const components = {
      ComponentA,
      ComponentB,
      ComponentC
    };
    const currentComponent = ref('ComponentA');
    const userRole = 'user'; // 假設用戶角色，實際應用中應該從用戶信息獲取
    const cachedComponents = userRole === 'user'? ['ComponentA'] : ['ComponentB', 'ComponentC'];
    const changeComponent = (componentName) => {
      currentComponent.value = componentName;
    };
    return {
      currentComponent,
      cachedComponents,
      changeComponent
    };
  }
});
</script>

在這個例子中，cachedComponents是一個響應式數(shù)組，根據(jù)用戶角色來決定哪些組件應該被包含在keep - alive的緩存中。
動態(tài)組件component會根據(jù)currentComponent的值來切換顯示不同的子組件，并且只有在cachedComponents數(shù)組中的組件才會被keep - alive緩存。

總結

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

基于Vue+Node.js實現(xiàn)埋點功能全流程
埋點（Track）是指在應用程序、網(wǎng)站或平臺中添加代碼,以記錄特定用戶行為和事件的做法,通過添加埋點代碼,可以觀察和分析用戶行為,以調(diào)整和改進產(chǎn)品設計和使用體驗,本文給大家介紹了基于Vue+Node.js實現(xiàn)埋點功能的全流程,需要的朋友可以參考下
2025-04-04
vue子路由跳轉(zhuǎn)實現(xiàn)tab選項卡效果
這篇文章主要為大家詳細介紹了vue子路由跳轉(zhuǎn)實現(xiàn)tab選項卡效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-03-03
vue項目實現(xiàn)圖片懶加載的簡單步驟
懶加載的好處在于減少服務器的壓力,在網(wǎng)絡比較慢的情況下,可以提前給這張圖片添加一個占位圖片,提高用戶的體驗,這篇文章主要給大家介紹了關于vue項目實現(xiàn)圖片懶加載的相關資料,需要的朋友可以參考下
2022-09-09
VUE腳手架的下載和配置步驟詳解
這篇文章主要介紹了VUE腳手架下載和配置，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-04-04
vue移動端使用canvas簽名的實現(xiàn)
這篇文章主要介紹了vue移動端使用canvas簽名的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-01-01
vue-cli webpack 引入swiper的操作方法
今天小編就為大家分享一篇vue-cli webpack 引入swiper的操作方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
全局安裝 Vue cli3 和繼續(xù)使用 Vue-cli2.x操作
這篇文章主要介紹了全局安裝 Vue cli3 和繼續(xù)使用 Vue-cli2.x操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-09-09
Vue.js 中取得后臺原生HTML字符串原樣顯示問題的解決方法
這篇文章主要介紹了VUE.js 中取得后臺原生HTML字符串原樣顯示問題 ,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
2018-06-06
解決Vue數(shù)據(jù)更新了但頁面沒有更新的問題
在vue項目中,有些我們會遇到修改完數(shù)據(jù),但是視圖卻沒有更新的情況,具體的場景不一樣,解決問題的方法也不一樣,在網(wǎng)上看了很多文章,在此總結匯總一下,需要的朋友可以參考下
2023-08-08
Vue中keep-alive組件作用詳解
這篇文章主要為大家詳細介紹了Vue中keep-alive組件的作用，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-02-02

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

vue3動態(tài)路由+動態(tài)組件+緩存應用方式

目錄

Vue3 案例復現(xiàn)（動態(tài)注冊組件及路由重定向）

1. 項目結構

2. Vuex 存儲相關信息（src/store/index.js）

3. 動態(tài)注冊組件示例（src/router/index.js）

4. 登錄組件（src/views/Login.vue）

動態(tài)組件

vue3 中動態(tài)路由應用

Vue 3 動態(tài)路由應用場景

Vue 3 動態(tài)路由實例

removeRoute 以及 hasRoute

思考（當頁面被刷新時store 數(shù)據(jù)會被重置，怎么保持登錄狀態(tài)，并建立當前緩存）

keep-alive

keep-alive（exclude / include）

總結

相關文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

vue3動態(tài)路由+動態(tài)組件+緩存應用方式

目錄

Vue3 案例復現(xiàn)（動態(tài)注冊組件及路由重定向）

1. 項目結構

2. Vuex 存儲相關信息（src/store/index.js）

3. 動態(tài)注冊組件示例（src/router/index.js）

4. 登錄組件（src/views/Login.vue）

動態(tài)組件

vue3 中動態(tài)路由 應用

Vue 3 動態(tài)路由應用場景

Vue 3 動態(tài)路由實例

removeRoute 以及 hasRoute

思考（當頁面被刷新時store 數(shù)據(jù)會被重置，怎么保持登錄狀態(tài)，并建立當前緩存）

keep-alive

keep-alive（exclude / include）

總結

相關文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

vue3 中動態(tài)路由應用

思考（當頁面被刷新時store 數(shù)據(jù)會被重置，怎么保持登錄狀態(tài)，并建立當前緩存）