Vue3根据菜单动态生成路由

如果直接路由是在router里面直接写死这样是不太合理的。因为每个用户都有自己不同的菜单 我们应该根据不同的用户菜单生成不同的路由。根据用户信息中的菜单列表动态的生成该用户拥有的路由。

修改路由拦截器在用户访问页面之前根据其菜单动态添加 路由

(src/router/permission.js)

import {addRoutes,router} from './index.js';
import {getToken} from '../utils/cookie.js';
import {hideFullLoading,showFullLoading,toast} from '../utils/message.js';
import store from '../store/index.js';

//前置路由守卫
router.beforeEach((to,from,next)=>{
   //显示loading
   showFullLoading()
   
   //获取token
   const token = getToken()
   //还没有登录且不是访问登录页面跳转到登录页面
   if(!token && to.path !== '/login'){
     toast('请先登录','warning')
     return next({path:'/login'})
   }
   //防止重复登录有token,且访问的是登录页面
   if(token && to.path === '/login'){
      toast('您已经登录过了','warning')
      return next({path:from.path || '/'})
    }
    //判断是否有新的路由
    let hasNewRoute = false
    //如果用户登录了自动化获取用户信息并存储在vuex中
    if(token){
       let userData = store.dispatch('actionGetUserInfo')
       //动态添加路由
       hasNewRoute = addRoutes(userData.menus)
    }
    //设置页面标题
    document.title = (to.meta.title || '') +'-后台管理系统’
    //放行
    hasNewRoute ? next(to.fullPath) :next()
})
 
//全局后置守卫
router.afterEach((to,from)=>{ hideFullLoading())

修改路由器src/core/router/index.js

import {createRouter,createWebHashHistory} from 'vue-router'

//引入页面
import Layout from '../index.vue'
import NotFound from '../404.vue'
import Login from '../login.vue'
import Index from '../index.vue'

//静态路由数组
const routes = [
    // 配置单个路由
    {
        path:'/',
        name:'Layout',
        component:Layout
    },
    // 登录页面
    {
        path:'/login',
        name:'Login',
        component:Login,
        meta:{
            title:'登录'
        }
    },
    // 所有不存在的路由都 走404
    {
        path:'/:pathMatch(.*)*',
        name:'NotFound',
        component:NotFound
    }
]

// 动态路由用来匹配菜单动态添加路由
const dongtaiRoutes = [
    {
        path:'/index',
        name:'Index',
        component:Index,
        meta:{
            title:'首页'
        }
    },
    {
        path:'/analysis',
        name:'Analysis',
        component:Index,
        meta:{
            level:1,//一级路由
            title:'可视化大屏'
        }
    }
]

// 创建路由器管理所有路由
export const router = createRouter({
    history:createWebHashHistory(),
    routes
})

// 动态添加路由的方法
export const addRoutes = (menus)=>{
    // 是否有新的路由
    let hasNewRoute = false
    // 从动态路由中找菜单
    const findRoute = (menuArr)=>{
        // 遍历每个菜单
        menuArr.forEach(menu=>{
            // 从动态路由中找到和菜单的路径相同的路由
            let route = dongtaiRoutes.find(route=>route.path === menu.url_path)
            // 如果找到了且没有注册过
            if(route && !route.hasRoute(route.name)){
                if(route.meta && route.meta.level && route.meta.level ===1){
                    // 添加一级路由
                    router.addRoute(route)
                }else{
                    // 添加子路由
                    router.addRoute('Layout',route)
                }
                hasNewRoute = true
            }
            // 如果还有嵌套路由
            if(menu.children && menu.children.length >0){
                findRoute(menu.children)
            }
        })
    }
    // 为菜单动态添加路由
    findRoute(menus)
    // 返回
    return hasNewRoute
}