在正式的案例中，我們需要登錄后從服務器獲取token后再用token來獲取數據，而且對于用戶也有不同的角色（管理員和普通用戶），因此實際項目的路由應該根據權限進行動態獲取，下面就對之前實現的后臺管理項目進行修改，將靜態路由修改成動態路由。

首先增加本地mock數據倉庫，封裝api：

//本地mock模擬數據 const adminMenu = [{path: '/adminhome',name: 'adminhome',meta: {label: '管理員主頁',icon: 'HomeFilled',isShow: true,},url: "home/AdminHome"},{path: '/manage1',name: 'manage1',meta: {label: '管理頁面1',icon: 'Setting',isShow: true,},url: "Admin/Manage1"},{path: '/manage2',name: 'manage2',meta: {label: '管理頁面2',icon: 'Setting',isShow: true,},url: "Admin/Manage2"}, ]; const userMenu = [{path: '/userhome',name: 'userhome',meta: {label: '用戶主頁',icon: 'HomeFilled',isShow: true,},url: "home/UserHome"},{path: '/userPage1',name: 'userPage1',meta: {label: '頁面1',icon: 'Setting',isShow: true,},url: "User/UserPage1"},{path: '/userPage2',name: 'userPage2',meta: {label: '頁面2',icon: 'Setting',isShow: true,},url: "User/UserPage2"}, ];export default {getMenuDataByRole: (params) => {// console.log("==========Menu Mock=============");// console.log(params);let requestData = JSON.parse(params.body); //傳入數據是jsonlet rsList = [];// console.log("requestData.role: " + requestData.role);if (requestData.role === "admin") {rsList = adminMenu;}else {rsList = userMenu;}return {code: 200,data: {routers: rsList}}}, }

然后在登錄頁面實現登錄邏輯，并獲取服務器返回的token和role并進行存儲，本項目將之存儲與vuex中，實際可以存儲在cookie或者localstorage中實現登錄狀態保存等功能，然后就需要修改路由導航：

"use strict"; import { ref } from "vue"; import { createRouter, createWebHashHistory, } from 'vue-router' import store from '../store/index' import api from '../api/api';let inited = false; //是否加載過 const routes = [{path: '/',name: "login",component: () => import('../views/login/Login.vue')},{path: '/main',name: 'main',component: () => import(/* webpackChunkName: "[main]"*/'../views/Main.vue')}, ]const router = createRouter({history: createWebHashHistory(),//調用routes })// 路由攔截與動態路由 router.beforeEach(async (to) => {// console.log("==============Router===============");// 登錄攔截const token = store.state.userToken;// console.log("token: " + token);if (!token && to.name !== "login") {return '/';}if (to.name !== 'login' && token) {if (!inited) { //還未動態加載路由//動態路由const role = store.state.userRole;let routerData = ref([]);// const { proxy } = getCurrentInstance();let resObj = await api.getMenuData({ role: role });routerData = resObj.routers;// console.log(routerData);routerData.forEach((v) => {let viewUrl = `../views/${v.url}.vue`;// console.log(viewUrl);let routerObj = {path: v.path,name: v.name,meta: v.meta,component: () => import(/* @vite-ignore *//* webpackChunkName: "[request]"*/ viewUrl),}// console.log(routerObj);router.addRoute("main", routerObj);})// console.log(routerData);inited = true;// router.replace(to.name)console.log();}}else {inited = false;}});export default router; //導出路由

上述的邏輯是，使用一個是否進行了路由列表初始化的標鍵變量inited來進行標鍵是否進行了路由表的初始化，然后先攔截非登錄的訪問頁面請求，再根據role來向服務器請求對應的路由列表。

注意！！！在動態import時vite會給我們拋出警告，這里我確保url正確，所以采用/* @vite-ignore */注釋忽略了，實際參考下面可以解決。

vue3+vite2警告提示The above dynamic import cannot be analyzed by vite問題,vite中import動態引入_云秒的博客-CSDN博客

?

總結

以上是生活随笔為你收集整理的Vue3动态路由与路由守卫的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。