vueRouter 动态路由

最新再写vue，需要根据后台传入的用户权限表 根据表生成相应的路由(也就是动态路由 )

安装vue-router

npm install router@4

创建router 文件夹 创建index.ts guard.ts 在index里主要写动态路由 guard里主要写导航守卫

index

import { App } from "vue";
import { RouteMeta, RouteRecordRaw, createRouter, createWebHashHistory} from "vue-router";
import { setupPageGuard } from './guard'
// 获取views下的所有.vue文件
const routeFiles = import.meta.glob('../views/**/*.vue')

const routes: RouteRecordRaw[] = [];

const loginLayout = ["login"]
// 定义基础路由
routes.push({
    path: '/',
    name: 'index',
    redirect: '/login'
})

routes.push({
    path: '/login',
    name: 'login',
    component: () => routeFiles['../views/login/index.vue']()
})

routes.push({
    path: '/404',
    name: '404',
    component: () => routeFiles['../views/error/404.vue']()
})

const menuList: any = [];


for(const path in menuList){
  let meta: RouteMeta = {}
  const routePath = menuList[path].path
  const componentName = menuList[path].name;

  if(loginLayout.includes(routePath)) meta.layout = 'LoginLayout'
  else meta.layout = 'MainLayout'

  routes.push({
    path: routePath,
    name: componentName,
    component: () => routeFiles['../views/'+routePath+'/index.vue'](),
    meta
  })
}

export const router = createRouter({
    history: createWebHashHistory(),
    routes
})

// 路由守卫
setupPageGuard(router)

export async function setupRouter(app: App) {
    app.use(router)
    await router.isReady()
}

guard

import { Router } from "vue-router";
const passPath = ['/login', '/404'];

/**
 * 设置页面守卫，用于在路由跳转前进行权限校验。
 * @param {Router} router - Vue Router 实例，用于配置和管理路由。
 */
export function setupPageGuard(router: Router) {
    // 在每个路由跳转前执行校验逻辑
    router.beforeEach((to, from, next) => {
      // 检查路径是否在无需权限验证的列表中
      if (passPath.includes(to.path)) {
        next(); 
        return;
      }
      // 从本地存储获取token进行权限验证
      const token = localStorage.getItem('token');
      if (token) {
        next(); 
      } else {
        next('/login'); 
      }
    });
}

main.ts

import { setupRouter } from './router'
setupRouter(app);