Naive UI Admin搭建流程：路由配置

路由是项目中最重要的部分。本节将实现路由权限控制，动态生成菜单

目录结构

src
 router
   modules
     dashboard.js
   base.js
   constant.js
   index.js
   router-guards.js
 store
   modules
     asyncRoute.js

组件常量

创建src/router/constant.js，填入以下内容：

router/constant.js

export const RedirectName = 'Redirect';

export const ErrorPage = () => import('@/views/exception/404.vue');

export const Layout = () => import('@/layout/index.vue');

Layout将在项目布局篇中予以实现，这里为了不报错可以先写一个空的index.vue

单个路由

定义单独的页面路由组件，后续会统一读取添加到路由以及生成菜单。

错误和重定向页面路由

创建src/router/base.js，填入以下内容：

router/base.js

import { ErrorPage, RedirectName, Layout } from '@/router/constant';

// 404 on a page
export const ErrorPageRoute = {
  path: '/:path(.*)*',
  component: Layout,
  meta: {
    title: 'ErrorPage',
    hideBreadcrumb: true,
  },
  children: [
    {
      path: '/:path(.*)*',
      component: ErrorPage,
      meta: {
        title: 'ErrorPage',
        hideBreadcrumb: true,
      },
    },
  ],
};

export const RedirectRoute = {
  path: '/redirect',
  name: RedirectName,
  component: Layout,
  meta: {
    title: RedirectName,
    hideBreadcrumb: true,
  },
  children: [
    {
      path: '/redirect/:path(.*)',
      name: RedirectName,
      component: () => import('@/views/redirect/index.vue'),
      meta: {
        title: RedirectName,
        hideBreadcrumb: true,
      },
    },
  ],
};

Dashboard页面路由

创建src/router/modules/dashboard.js，填入以下内容：

router/modules/dashboard.js

const routeName = 'dashboard';
import { Layout } from '@/router/constant';
import { DashboardOutlined } from '@vicons/antd';
import { renderIcon } from '@/utils/index';

const routes = [
  {
    path: '/dashboard',
    name: routeName,
    redirect: '/dashboard/console',
    component: Layout,
    meta: {
      title: 'Dashboard',
      icon: renderIcon(DashboardOutlined),
      permissions: ['dashboard_console', 'dashboard_workplace'],
      sort: 0,
    },
    children: [
      {
        path: 'console',
        name: `${routeName}_console`,
        meta: {
          title: '主控台',
          permissions: ['dashboard_console'],
          affix: true,
        },
        component: () => import('@/views/dashboard/console/console.vue'),
      },
      {
        path: 'workplace',
        name: `${routeName}_workplace`,
        meta: {
          title: '工作台',
          keepAlive: true,
          permissions: ['dashboard_workplace'],
        },
        component: () => import('@/views/dashboard/workplace/workplace.vue'),
      },
    ],
  },
];

export default routes;

路由整合

暂时未添加路由守卫功能，后续会增加。

新建src/router/index.js，内容如下：

Vite 方式请如用如下代码组装路由

const modules = import.meta.glob('./modules/**/*.js', { eager: true });

// 整合modules下的路由，形成列表
const routeModuleList = Object.keys(modules).reduce((list, key) => {
  const mod = modules[key].default ?? {};
  const modList = Array.isArray(mod) ? [...mod] : [mod];
  return [...list, ...modList];
}, []);

router/index.js

import { PageEnum } from '@/enums/pageEnum';
import { createRouter, createWebHashHistory } from 'vue-router';
import { RedirectRoute } from '@/router/base';
import { ErrorPageRoute } from './base';

const modules = require.context('@/router/modules/', false, /\.js$/);

// 整合modules下的路由，形成列表
const routeModuleList = [];

modules.keys().forEach((key) => {
  const mod = modules(key).default || {};
  const modeList = Array.isArray(mod) ? [...mod] : [mod];
  routeModuleList.push(...modeList);
});

function sortRoute(a, b) {
  return (a.meta?.sort || 0) - (b.meta?.sort || 0);
}

routeModuleList.sort(sortRoute);

// 根路由
export const RootRoute = {
  path: '/',
  name: 'Root',
  redirect: PageEnum.BASE_HOME,
  meta: {
    title: 'Root',
  },
};
// 登录路由
export const LoginRoute = {
  path: '/login',
  name: 'Login',
  component: () => import('@/views/login/index.vue'),
  meta: {
    title: '登录',
  },
};

//需要验证权限
export const asyncRoutes = [...routeModuleList];

// 普通路由，无需验证权限
export const constantRouter = [
  LoginRoute,
  RootRoute,
  RedirectRoute,
  ErrorPageRoute
];

const router = createRouter({
  history: createWebHashHistory(''),
  routes: constantRouter,
  strict: true,
  scrollBehavior: () => ({ left: 0, top: 0 }),
});
export function setupRouter(app) {
  app.use(router);
}

export default router;

挂载路由

在src/main.js中挂载路由

main.js

import './styles/tailwind.css';
import { createApp } from 'vue';
import App from './App.vue';
import router, { setupRouter } from './router';
import { setupStore } from './store';
import { setupNaive } from './plugins';

async function bootstrap() {
  const app = createApp(App);

  // 挂载状态管理
  setupStore(app);

  // 注册全局常用的 naive-ui 组件
  setupNaive(app);

  // 挂载路由
  setupRouter(app);

  // 路由准备就绪后挂载 APP 实例
  // https://router.vuejs.org/api/interfaces/router.html#isready
  await router.isReady();

  app.mount('#app', true);
}

bootstrap();

动态路由

动态路由一般有两种实现方式：

后端获取路由列表数据，在前端做数据处理后动态生成路由和菜单信息
使用权限过滤，过滤账户是否拥有某一个权限，并将菜单从加载列表移除

本次项目使用的是权限过滤方式。

创建src/store/modules/asyncRoute.js

store/modules/asyncRoute.js

import { asyncRoutes, constantRouter } from '@/router';
import { defineStore } from 'pinia';
import { toRaw, unref } from 'vue';
import { store } from '@/store';
import { useProjectSetting } from '@/hooks/setting/useProjectSetting';

const DEFAULT_CONFIG = {
  id: 'id',
  children: 'children',
  pid: 'pid',
};
const getConfig = (config) => Object.assign({}, DEFAULT_CONFIG, config);

function filter(tree, func, config = {}) {
  config = getConfig(config);
  const children = config.children;

  function listFilter(list) {
    return list
      .map((node) => ({ ...node }))
      .filter((node) => {
        node[children] = node[children] && listFilter(node[children]);
        return func(node) || (node[children] && node[children].length);
      });
  }
  return listFilter(tree);
}

export const useAsyncRouteStore = defineStore({
  id: 'app-async-route',
  state: () => ({
    menus: [],
    routers: constantRouter,
    addRouters: [],
    keepAliveComponents: [],
    // Whether the route has been dynamically added
    isDynamicAddedRoute: false,
  }),
  getters: {
    getMenus() {
      return this.menus;
    },
    getIsDynamicAddedRoute() {
      return this.isDynamicAddedRoute;
    },
  },
  actions: {
    getRouters() {
      return toRaw(this.addRouters);
    },
    setDynamicAddedRoute(added) {
      this.isDynamicAddedRoute = added;
    },
    // 设置动态路由
    setRouters(routers) {
      this.addRouters = routers;
      this.routers = constantRouter.concat(routers);
    },
    setMenus(menus) {
      // 设置动态路由
      this.menus = menus;
    },
    setKeepAliveComponents(compNames) {
      // 设置需要缓存的组件
      this.keepAliveComponents = compNames;
    },
    generateRoutes(data) {
      let accessedRouters;
      const permissionsList = data.permissions || [];
      const routeFilter = (route) => {
        const { meta } = route;
        const { permissions } = meta || {};
        if (!permissions) return true;
        return permissionsList.some((item) => permissions.includes(item.value));
      };
      const { getPermissionMode } = useProjectSetting();
      const permissionMode = unref(getPermissionMode);
      if (permissionMode === 'BACK') {
        // 从后端获取数据，动态生成菜单
      } else {
        try {
          // 过滤账户是否拥有某一个权限，并将菜单从加载列表移除
          accessedRouters = filter(asyncRoutes, routeFilter);
        } catch (error) {
          console.log(error);
        }
      }
      accessedRouters = accessedRouters.filter(routeFilter);
      this.setRouters(accessedRouters);
      this.setMenus(accessedRouters);
      return toRaw(accessedRouters);
    },
  },
});
// Need to be used outside the setup
export function useAsyncRouteStoreWidthOut() {
  return useAsyncRouteStore(store);
}

generateRoutes(data)

该方法将在获取到用户信息后执行，用于动态生成路由和侧边栏菜单信息，在路由守卫中执行

路由守卫

路由守卫负责拦截每次的路由跳转，我们可以在每次路由跳转前，判断Token是否过期、获取用户信息、动态添加路由等操作；在路由跳转之后，可以缓存组件等。

创建src/router/router-guards.js，内容如下：

router/router-guards.js

import { PageEnum } from '@/enums/pageEnum';
import { useAsyncRouteStoreWidthOut } from '@/store/modules/asyncRoute';
import { useUserStoreWidthOut } from '@/store/modules/user';
import { ACCESS_TOKEN } from '@/store/mutation-types';
import { storage } from '@/utils/Storage';
import { isNavigationFailure } from 'vue-router';
import { ErrorPageRoute } from './base';

const LOGIN_PATH = PageEnum.BASE_LOGIN;

// 路由守卫白名单，即不进行重定向
const whitePathList = [LOGIN_PATH];

// 创建路由守卫
export function createRouterGuards(router) {
  const userStore = useUserStoreWidthOut();
  const asyncRouteStore = useAsyncRouteStoreWidthOut();
  router.beforeEach(async (to, from, next) => {
    const Loading = window['$loading'] || null;
    Loading && Loading.start();
    if (from.path === LOGIN_PATH && to.name === 'errorPage') {
      next(PageEnum.BASE_HOME);
      return;
    }

    // 白名单直接进入
    if (whitePathList.includes(to.path)) {
      next();
      return;
    }
    // 获取登录的TOKEN
    const token = storage.get(ACCESS_TOKEN);
    if (!token) {
      // You can access without permissions. You need to set the routing meta.ignoreAuth to true
      if (to.meta.ignoreAuth) {
        next();
        return;
      }
      // 重定向到登录页，带跳转前的路径
      const redirectData = {
        path: LOGIN_PATH,
        replace: true,
      };
      if (to.path) {
        redirectData.query = {
          ...redirectData.query,
          redirect: to.path,
        };
      }
      next(redirectData);
      return;
    }
    // 动态路由添加完成后，由此放行
    if (asyncRouteStore.getIsDynamicAddedRoute) {
      next();
      return;
    }

    const userInfo = await userStore.GetInfo();
    const routes = asyncRouteStore.generateRoutes(userInfo);
    // 动态添加可访问路由表, 将过滤之后的动态路由添加到路由表形成完整的路由
    routes.forEach((item) => {
      router.addRoute(item);
    });

    // 不需要动态添加404
    const isErrorPage = router
      .getRoutes()
      .findIndex((item) => item.name === ErrorPageRoute.name);
    if (isErrorPage === -1) {
      router.addRoute(ErrorPageRoute);
    }

    const redirectPath = from.query.redirect || to.path;
    const redirect = decodeURIComponent(redirectPath);
    // 解决动态路由白屏问题，https://blog.csdn.net/qq_41912398/article/details/109231418
    const nextData =
      to.path === redirect ? { ...to, replace: true } : { path: redirect };
    // 动态路由添加完成，放行的出口
    asyncRouteStore.setDynamicAddedRoute(true);
    next(nextData);
    Loading && Loading.finish();
  });

  router.afterEach((to, _, failure) => {
    document.title = to?.meta?.title || document.title;
    if (isNavigationFailure(failure)) {
      //console.log('failed navigation', failure)
    }
    const asyncRouteStore = useAsyncRouteStoreWidthOut();
    // 在这里设置需要缓存的组件名称
    const keepAliveComponents = asyncRouteStore.keepAliveComponents;
    const currentComName = to.matched.find(
      (item) => item.name == to.name
    )?.name;
    if (
      currentComName &&
      !keepAliveComponents.includes(currentComName) &&
      to.meta?.keepAlive
    ) {
      // 需要缓存的组件
      keepAliveComponents.push(currentComName);
    } else if (!to.meta?.keepAlive || to.name == 'Redirect') {
      // 不需要缓存的组件
      const index = asyncRouteStore.keepAliveComponents.findIndex(
        (name) => name == currentComName
      );
      if (index != -1) {
        keepAliveComponents.splice(index, 1);
      }
    }
    asyncRouteStore.setKeepAliveComponents(keepAliveComponents);
    const Loading = window['$loading'] || null;
    Loading && Loading.finish();
  });

  router.onError((error) => {
    console.log(error, '路由错误');
  });
}

在src/router/index.js，加载路由守卫：

router/index.js

import { createRouterGuards } from './router-guards';

export function setupRouter(app) {
  app.use(router);
  createRouterGuards(router);
}