vue 使用后台返回菜单并生成动态路由

最新推荐文章于 2024-07-29 00:48:26 发布

原创

最新推荐文章于 2024-07-29 00:48:26 发布 · 2.1k 阅读

4 ·

CC 4.0 BY-SA版权

本文介绍了在2021年疫情背景下，作者如何在996工作制下，利用Vue+IView改造后台管理系统，实现动态菜单功能。通过在VueRouter中设置beforeEach钩子函数，结合Vuex存储获取的菜单数据，动态生成路由。同时，文章提到了在刷新或首次进入时的不同处理逻辑，并展示了关键代码片段。最后，通过store中调用接口获取并处理菜单结构，完成动态路由的创建。

2021，疫情本要缓解又变异的上半年，在五一快要到来之时，我已经苦逼了一月的996。前两天vue+iview的后台管理系统要改造成动态菜单，后台接口返回菜单，处理并生成路由。于是乎开始搞起来，（心态：第一次自己搞这个需求还是很崩溃的）~
当当当当
部分相关目录
在这里插入图片描述
开始上代码：

/**
 * 静态路由 容器
 */
const defaultRouter = [
  {
   
   
    path: "/Home",
    component: Home
  }
];
const router = new VueRouter({
   
   
  routes:defaultRouter
});

// OnRoute变量避免陷入死循环
let OnRoute = true; 
router.beforeEach((to,from,next)=>{
   
   
    if(OnRoute){
   
   
        // 首次进入Home存储token
        if(to.path=="/Home"&&to.query){
   
   
          // 处理
          createNewRouter(to