Element UI el-menu 跳转错误:路径变为 /message/detail/index 如何解决?

作者站长头像
站长
· 阅读数 14

我的页面是三级嵌套路由,结构类似于 /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')
          }
        ]
      }
    ]
  }
]

Element UI el-menu 跳转错误:路径变为 /message/detail/index 如何解决?Element UI el-menu 跳转错误:路径变为 /message/detail/index 如何解决?

请问我该如何解决这个问题,希望从 /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>
回复
1个回答
avatar
test
2024-09-07

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

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容