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

Question

问题描述：现在有/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'，虽然可以正常显示，但因为需求原因无法采取这种解决办法

Answer 1

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

Answer 2

this.$router.push({

            name: router
        })

Answer 3

router-link配置to的时候用:to='{name:""}'的话应该没问题的

Answer 4

我也遇到这个问题

Answer 5

把push换成replace试试

Answer 6

这样写试试

    {
      path: '/server',
      name: 'server',
      component: server,
      children: [
        {
          path: '/server/server_index',
          component: serverIndex
        },
        {
          path: '/server/settlement',
          component: settlement
        },
        {
          path: '/server/server_ratings',
          component: serverRatings
        }
      ]
    },

Answer 7

我在使用elementUI也碰到这个问题。没有加router-link，但依然不行。不知道什么原因。

Answer 8

路由这么配置：

const moduleName = '素材管理'
const folderCode = 'weChatMg'

const materialList = r => require.ensure([], () => r(require('@/components/materialMg/materialList.vue')), 'example');
const tabGmessageTem = r => require.ensure([], () => r(require('@/components/materialMg/tabGmessageTem.vue')), 'example');
const tabPictureTem = r => require.ensure([], () => r(require('@/components/materialMg/tabPictureTem.vue')), 'example');
const tabVoiceTem = r => require.ensure([], () => r(require('@/components/materialMg/tabVoiceTem.vue')), 'example');
const tabVideoTem = r => require.ensure([], () => r(require('@/components/materialMg/tabVideoTem.vue')), 'example');
const addGraphicMessage = r => require.ensure([], () => r(require('@/components/materialMg/addGraphicMessage.vue')), 'example');

export default [

{
    ***path: '/materialList',//这个是首次进来显示的路由
    component: materialList,
    children:[
        { 
            path: '', //二级路由默认显示的要为空
            component: tabGmessageTem,
        },***
        { 
            path: '/addGraphicMessage', 
            component: addGraphicMessage,
            
        },
        { 
            path: '/tabPictureTem', 
            component: tabPictureTem,
        },
        { 
            path: '/tabVoiceTem', 
            component: tabVoiceTem,
        },
        { 
            path: '/tabVideoTem', 
            component: tabVideoTem,
        }
    ]
},{
    path: '/addGraphicMessage',
    component: addGraphicMessage,
}

]

vue中

Answer 9

应该是 element ui 使用了 index 跳转而不使用 <router-link to=""> 引起的，改：
1、使用 @click="$router.push({name: ''})"跳过去
2、element ui 使用 index 跳转前面全部加反斜杠 index="/users"

Answer 10

用this.$router.push({name:''}) 可以
vue router 下
{

path:'testPath',
name:'testName',
component: import()=>{}

},
路由跳转
{

this.$router.push({path:testPath}) 在跳到二级路由之后会默认在二级路由继续跳转地址,
而
this.$router.push({name:testName}) 会根据name 进行跳转 寻找组件相关的名称,

}