从后端返回菜单添加动态路由

最新推荐文章于 2024-05-21 23:21:19 发布

咸鱼肥美妖娆

最新推荐文章于 2024-05-21 23:21:19 发布

阅读量135

点赞数 1

文章标签：前端 javascript vue

本文链接：https://blog.csdn.net/m0_51754096/article/details/136895293

版权

import { createRouter, createWebHistory } from 'vue-router'
import API from '@/api'
import Home from '@/views/Home.vue'
import Detail from '@/views/Detail.vue'
import NotFound from '@/views/NotFound.vue'

const routes = [
  {
    path: "/",
    component: Home,
    meta: {
      showmenus: true
    }
  },
  {
    path: "/detail/:id",
    component: Detail,
  },
  {
    path: '/:pathMatch(.*)*',
    component: NotFound,
  }
]

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

let isRoutesAdded = false; // 标记是否已经添加动态路由

router.beforeEach((to, from, next) => {
  if (!isRoutesAdded) {
    // 获取菜单数据
    API.getColumnsList().then(res => {
      if (res?.data?.code === 200) {
        let data = res.data.data;
        sessionStorage.setItem("menus", JSON.stringify(data));
        data.forEach(item => {
          const route = {
            path: `/channel_${item.enName}`,
            component: () => import(`../views/${item.enName}.vue`),
            meta: {
              showmenus: true
            }
          };
          router.addRoute(route);
        })
        isRoutesAdded = true; // 标记动态路由已添加，不然会死循环
        next(to.fullPath)
      } else {
        next(false); // 如果获取菜单数据失败，阻止路由跳转
      }
    })
  } else {
    next();
  }
})

export default router;