Vue3實現(xiàn)動態(tài)路由與手動導(dǎo)航

更新時間：2024年12月13日 09:39:31 作者：頭發(fā)禿頭小寶貝

這篇文章主要為大家詳細介紹了如何在?Vue?3?中實現(xiàn)動態(tài)路由注冊和手動導(dǎo)航,確保用戶訪問的頁面與權(quán)限對應(yīng),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

1. 動態(tài)路由的需求與原理

為什么需要動態(tài)路由？

權(quán)限控制：不同用戶角色需要看到不同的菜單和頁面。
后端驅(qū)動：后端返回菜單數(shù)據(jù)，前端動態(tài)渲染菜單和注冊路由。
避免硬編碼：路由不再寫死在前端代碼里，保證靈活性。

動態(tài)路由的原理

靜態(tài)路由：定義公共頁面，如登錄頁和404頁面。
動態(tài)路由：存儲需要通過后端數(shù)據(jù)動態(tài)添加的頁面。
動態(tài)注冊路由：根據(jù)后端返回的數(shù)據(jù)，通過 router.addRoute 動態(tài)添加到路由系統(tǒng)。
手動導(dǎo)航：添加新路由后，需要手動觸發(fā)導(dǎo)航以保證路由生效。

2. 靜態(tài)路由與動態(tài)路由配置

靜態(tài)路由

靜態(tài)路由是所有用戶共享的基本路由，如登錄頁、404頁等。

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
import Layout from '@/layout/admin.vue';

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    component: Layout,
    name: 'admin',
  },
  {
    path: '/login',
    name: 'login',
    component: () => import('@/pages/login/index.vue'),
    meta: { title: '登錄頁' },
  },
  {
    path: '/:pathMatch(.*)*',
    name: 'NotFound',
    component: () => import('@/pages/404/index.vue'),
    meta: { title: '404' },
  },
];

動態(tài)路由

動態(tài)路由需要根據(jù)后端返回的數(shù)據(jù)進行注冊：

const asyncRoutes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: '/',
    component: () => import('@/pages/index/index.vue'),
    meta: { title: '首頁' },
  },
  {
    path: '/goods/list',
    name: '/goods/list',
    component: () => import('@/pages/goods/list.vue'),
    meta: { title: '商品列表' },
  },
  {
    path: '/category/list',
    name: '/category/list',
    component: () => import('@/pages/category/list.vue'),
    meta: { title: '分類列表' },
  },
];

3. addRoutes 實現(xiàn)動態(tài)路由注冊

addRoutes 方法

該方法接收后端返回的菜單數(shù)組，并將匹配的動態(tài)路由添加到主路由 admin 下。

import { router } from '@/router/index';

export const addRoutes = (routesArray: Array<MenusArray>) => {
  let hasNewRoutes = false;

  const addRoutesFromMenus = (menus: Array<MenusArray>) => {
    menus.forEach((menu) => {
      // 查找匹配的動態(tài)路由
      const route = asyncRoutes.find((r) => r.path === menu.frontpath);
      // 添加到router中
      if (route && !router.hasRoute(route.path)) {
        router.addRoute('admin', route);
        hasNewRoutes = true;
      }
      // 遞歸處理子菜單
      if (menu.child && menu.child.length > 0) {
        addRoutesFromMenus(menu.child);
      }
    });
  };

  addRoutesFromMenus(routesArray);
  return hasNewRoutes;
};

解釋

router.addRoute：Vue Router 提供的 API，可以動態(tài)添加路由。
避免重復(fù)添加：router.hasRoute 檢查路由是否已存在，防止重復(fù)注冊。
遞歸處理：支持多級菜單，遞歸遍歷 child 子菜單。

4. 路由守衛(wèi)中調(diào)用 addRoutes

在 router.beforeEach 路由守衛(wèi)中，調(diào)用 addRoutes 注冊動態(tài)路由，并實現(xiàn)手動導(dǎo)航。

import { getToken } from '@/utils/auth';
import store from '@/store';
import { addRoutes } from '@/router/index';

router.beforeEach(async (to, from, next) => {
  const token = getToken();
  let hasNewRoutes = false;

  // 顯示全局加載狀態(tài)
  showFullLoading();

  // 未登錄跳轉(zhuǎn)到登錄頁
  if (!token && to.name !== 'login' && to.name !== 'NotFound') {
    return next('/login');
  }

  // 已登錄訪問登錄頁，重定向到主頁
  if (token && to.name === 'login') {
    return next('/');
  }

  // 已登錄狀態(tài)下，動態(tài)添加路由
  if (token) {
    await store.dispatch('user/getUserInfo'); // 拉取用戶信息
    hasNewRoutes = addRoutes(store.getters['menu/getMenus']); // 添加動態(tài)路由
  }

  // 設(shè)置頁面標題
  if (to.meta.title) {
    document.title = `${to.meta.title}-測試后臺管理`;
  } else {
    document.title = '測試后臺管理';
  }

  // 手動導(dǎo)航：如果添加了新路由，重新跳轉(zhuǎn)當(dāng)前頁面
  hasNewRoutes ? next(to.fullPath) : next();
});