vue-router嵌套路由，从二级路由跳转到一级路由时，间歇性导致一级路由重叠？

问题描述

问 题

问题描述：现在有/1、/2、/3两个一级路由，/1下面有/1/a子路由（二级路由），当从/1/a上跳至/2是，偶尔会出现跳到/1/2上面,而且此时在切换1,2,3时，会变成/1/1,/1/2,/1/3，来回切换时会突然变正常。如不是特别理解，可看下方代码及图片。

代码：

router/index.js(路由设置)

const router = new Router({
  routes: [
    { path: '/', redirect: '/apply' },
    { path: '/apply', name: 'apply', component: Apply },
    { path: '/myauth', name: 'myauth', component: MyAuth },
    { path: '/approval', name: 'approval', component: Approval },
    { path: '/manage', component: Manage,
      children: [
        { path: '', component: ManageIndex },
        { path: 'RoleMenu', name: 'RoleMenu', component: RoleMenu },
        { path: 'RoleMember', name: 'RoleMember', component: RoleMember }
      ]
    }
  ],
  mode: 'history'
})

app.vue(一级路由侧栏)

<el-row>
      <el-col :xs="24" :sm="4" :md="3" :lg="2">
        <el-menu router class="list" :default-active="active">
          <el-menu-item index="apply">
            <router-link to="/apply" class="router-item" >权限申请</router-link>
          </el-menu-item>
          <el-menu-item index="myauth" @click.native="getAuthData">
            <router-link to="/myauth" class="router-item">
              <span>我的权限</span>
              <span class="my-badge" v-show="newAuthNum > 0">{{newAuthNum}}</span>
            </router-link>
          </el-menu-item>
          <el-menu-item index="approval">
            <router-link to="/approval" class="router-item">
              <span>我的审批</span>
              <span class="my-badge" v-show="approvalNum > 0">{{approvalNum}}</span>
            </router-link>
          </el-menu-item>
          <el-menu-item index="manage">
            <router-link to="/manage" class="router-item">权限管理</router-link>
          </el-menu-item>
        </el-menu>
      </el-col>
      <el-col :xs="24" :sm="20" :md="21" :lg="22">
        <keep-alive>
          <router-view :new-msg="newMsg" :user-msg="userMsg" ref="myauth"></router-view>
        </keep-alive>
      </el-col>
    </el-row>

ManageIndex.vue(一级路由进入二级路由)

roleMenu (index, rows) {
    this.$router.push({name: 'RoleMenu', query: {id: rows[index].id, role: encodeURIComponent(rows[index].role)}})
},

RoleMenu.vue(二级路由返回一级路由)

<el-button type="text"><router-link to="/Manage"><i class="el-icon-arrow-left"></i></router-link></el-button>

图片描述：

正常情况：

异常情况：

尝试过的解决办法：

1.使用this.$router.push跳转侧栏
2.配置子路由的path为'/RoleMenu'，这样就是同一级目录，跳转到的是'.com/RoleMenu'而不是'.com/manage/RoleMenu'，虽然可以正常显示，但因为需求原因无法采取这种解决办法

解决方案

我也遇到这个问题了，懒加载的时候特别严重，楼主找到解决方案了吗

这篇关于vue-router嵌套路由，从二级路由跳转到一级路由时，间歇性导致一级路由重叠？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！