我想做一个点击详情的跳转页，在菜单里添加后打印解析后的动态路由列表里没有是怎么回事啊？还是说不用在菜单管理配置而是在router的constantRoutes里加配置？

Question

Vue3+ Vite + Element-Plus + TypeScript 从0到1搭建企业级后台管理系统之我想做一个点击详情的跳转页，在菜单里添加后打印解析后的动态路由列表里没有是怎么回事啊？还是说不用在菜单管理配置而是在router的constantRoutes里加配置？但是最后面代码跳转不过去，得加在

 path: "/",
    name: "/",
    component: Layout,
    redirect: "/dashboard",
    children: [

才行，并且有时路由跳转但是页面没有变化需要刷新才行，并且没有走监听，onmounted，全局路由守卫，或者我需要再写一个动态路由？比如

export const dynamicRoutes = [
{
        path: '/system/dict-data',
        component: Layout,
        hidden: true,
        permissions: ['system:dict:list'],
        children: [
            {
                path: 'index/:dictId(\\d+)',
                component: () => import('@/views/system/dict/data'),
                name: 'Data',
                meta: { title: '字典数据', activeMenu: '/system/dict' },
            },
        ],
    },

export const constantRoutes: RouteRecordRaw[] = [
 {
    path: "/login",
    component: () => import("@/views/login/index.vue"),
    meta: { hidden: true },
  },
 {
    path: "/infoRooms",
    name: "RoomInfos",
    component: Layout,
    redirect: "/infoRoom",
    children: [{
      path: "infoRoom",
      name: "RoomInfo",
      component: () => import("@/views/room/room/info.vue"),
      meta: { title: "房间管理详情", icon: "user" },
    },],
  },

Answer 1

阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

解答

你遇到的问题是，在 Vue3+ Vite + Element-Plus + TypeScript 中，如何在菜单中添加点击详情的跳转页，并在路由列表中打印解析后的动态路由列表。

解决方案：

1. 在 router 模块中添加动态路由

// router/index.ts
import { createRouter, createWebHistory } from 'vue-router';
import { routes } from './routes';

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

export default router;

// routes.ts
import { defineRoute } from 'vue-router';

const routes: Array<defineRoute> = [
  {
    path: '/',
    name: 'home',
    component: () => import('@/views/Home.vue'),
  },
  {
    path: '/detail/:id',
    name: 'detail',
    component: () => import('@/views/Detail.vue'),
  },
];

export default routes;

1. 在菜单中添加点击详情的跳转页

<!-- Menu.vue -->
<template>
  <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
    <el-menu-item v-for="item in menuList" :key="item.path" :index="item.path">
      {{ item.name }}
    </el-menu-item>
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '',
      menuList: [],
    };
  },
  mounted() {
    this.getMenuList();
  },
  methods: {
    getMenuList() {
      // 获取动态路由列表
      const routes = this.$router.options.routes;
      this.menuList = routes.filter((route) => route.meta && route.meta.menu);
    },
    handleSelect(key) {
      // 点击菜单项时，跳转到对应的路由
      this.$router.push({ name: key });
    },
  },
};
</script>

1. 在路由列表中打印解析后的动态路由列表

<!-- App.vue -->
<template>
  <div>
    <Menu />
    <router-view />
  </div>
</template>

<script>
export default {
  mounted() {
    // 获取动态路由列表
    const routes = this.$router.options.routes;
    console.log(routes);
  },
};
</script>

总的来说，你需要在 router 模块中添加动态路由，然后在菜单中添加点击详情的跳转页，并在路由列表中打印解析后的动态路由列表。