vue.js - Element UI el-menu 跳转错误：路径变为 /message/detail/index 如何解决？

Question

我的页面是三级嵌套路由，结构类似于 /message/detail/0。
页面的菜单使用了element-ui的el-menu
但我点击菜单的选项返回首页的时候，页面路径变成了/message/detail/index。

这个是路由配置的JS：

const routes = [
  {
    path: '/',
    name: 'layout',
    redirect:'/index',
    component: () => import('../views/Layout.vue'),
    children: [
      {
        path: 'index',
        component:() => import('../views/index/index.vue')
      },
      {
        path:'message',
        component:() => import('../views/message/message.vue'),
        children:[
          {
            path:'detail/:id',
            component:() => import('../views/message/messageDetail.vue')
          }
        ]
      }
    ]
  }
]

请问我该如何解决这个问题，希望从 /message/detail/0 页面直接跳转到 /index。

补充问题：
使用的是el-menu默认的方法
在el-menu标签设置router,给每个el-menu-item设置index
代码如下：

        <el-menu
          :default-active="active"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          :collapse="isCollapse"
          router
        >
          <el-menu-item index="index">
            <i class="el-icon-menu"></i>
            <span slot="title">首页</span>
          </el-menu-item>
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span slot="title">信息管理</span>
            </template>
            <el-menu-item-group>
              <!-- <span slot="title">分组一</span> -->
              <el-menu-item index="newslist">新闻管理</el-menu-item>
              <el-menu-item index="activelist">活动管理</el-menu-item>
              <el-menu-item index="memberlist">成员管理</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span slot="title">审核平台</span>
            </template>
            <el-menu-item-group>
              <!-- <span slot="title">分组一</span> -->
              <el-menu-item index="platform">审核中心</el-menu-item>
              <el-menu-item index="workbench">工作台</el-menu-item>
              <el-menu-item index="lastaudit">历史数据</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-menu-item index="message">
            <i class="el-icon-message"></i>
            <span slot="title">站内通知</span>
          </el-menu-item>
          <el-menu-item index="calendar">
            <i class="el-icon-date"></i>
            <span slot="title">日程</span>
          </el-menu-item>
          <el-menu-item index="setting">
            <i class="el-icon-setting"></i>
            <span slot="title">设置</span>
          </el-menu-item>
        </el-menu>

js代码：

<script>
export default {
  name: "DmindexManagementLayout",

  data() {
    return {
      isCollapse: false,
      active: "index",
    };
  },
  watch: {
    $route: {
      handler(newval, oldval) {
        // console.log(newval); //新路由信息
        this.active = newval.name
      },
      // 深度观察监听
      deep: true,
      immediate: true,
    },
  },
  created(){},
  mounted() {},

  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>

Answer 1

把message这级路由拿出来和/级路由同级，而不是在chidlren里试试；

Answer 2

看看你返回首页的代码是怎么写的