element导航刷新不显示问题

Question

请问我这样为什么不行，难道是因为这些都是子路由得原因

<template>

<div class="siderbar">
    <el-col :span="24">
        <el-menu :default-active="onRoutes" class="el-menu-vertical-demo" theme="dark" unique-opened router @open="handleOpen" @close="handleClose" background-color="#25283A" text-color="#fff" active-text-color="#ffd04b">
            <el-menu-item index="/">
                <div class="sidebar-1 pt15" style="width:100%; height:40%; background:url(../static/images/1.png) no-repeat center;"></div>
                首页
            </el-menu-item>
            <el-submenu index="2" :disabled="isDisabled">
                <template slot="title">
                    <div class="sidebar-2 pt15" style="width:100%; height:40%; background:url(../static/images/2.png) no-repeat center;"></div>
                    商品
                </template>
                <el-menu-item-group>
                    <el-menu-item class="menu-son" index="/goods/goodsrelease">
                        上架管理
                    </el-menu-item>
                    <el-menu-item class="menu-son" index="/goods/SalesData">销售数据</el-menu-item>
                </el-menu-item-group>
            </el-submenu>

            <el-submenu index="3" :disabled="isDisabled">
                <template slot="title">
                    <div class="sidebar-3 pt15" style="width:100%; height:40%; background:url(../static/images/3.png) no-repeat center;"></div>
                    上传
                </template>
                <el-menu-item-group>
                    <el-menu-item class="menu-son" index="/UploadGoods">上传商品</el-menu-item>
                    <el-menu-item class="menu-son" index="/uploadProgress">商品进度</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <el-submenu index="4">
                <template slot="title">
                    <div class="sidebar-4 pt15" style="width:100%; height:40%; background:url(../static/images/4.png) no-repeat center;"></div>
                    个人
                </template>
                <el-menu-item-group>
                    <el-menu-item class="menu-son" index="/personal" :disabled="isDisabled">个人中心</el-menu-item>
                    <el-menu-item class="menu-son" index="/realName">认证中心</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <el-menu-item index="/exchange" :disabled="isDisabled">
                <div class="sidebar-5 pt15" style="width:100%; height:40%; background:url(../static/images/5.png) no-repeat center;"></div>
                兑换
            </el-menu-item>
            <el-menu-item index="/help">
                <div class="sidebar-6 pt15" style="width:100%; height:40%; background:url(../static/images/6.png) no-repeat center;"></div>
                帮助
            </el-menu-item>
        </el-menu>
    </el-col>
</div>

</template>

export default {

computed: {
    onRoutes(){
            return this.$route.path.replace('/','');
        }
}

};

Answer 1

代码有问题，为什么总默认跳转到'/'路径；
而且为什么可以把this.$route.path.replace('/','')的返回值写到设置高量的:default-active上；

 onRoutes(){
            return this.$route.path.replace('/','');
        }

例子：

<template>
  <el-row style="border-bottom: 1px solid #eee;">
    <el-col :span="15" :offset="3">
      <el-menu :default-active="this.$route.path" class="el-menu-demo" mode="horizontal"  style="border:none;font-size: 18px">
        <el-menu-item index="/home">
          <router-link slot="title" to="/home" class="router-link">首页</router-link>
        </el-menu-item>
        <el-menu-item index="/home/project">
          <router-link slot="title" to="/home/project" class="router-link">文章</router-link>
        </el-menu-item>
        <el-menu-item index="/form/project">
          <router-link slot="title" to="/form/project" class="router-link">写文章</router-link>
        </el-menu-item>
        <el-menu-item index="/user">
          <router-link slot="title" to="/user" class="router-link">个人中心</router-link>
        </el-menu-item>
        <el-menu-item index="/about">
          <router-link slot="title" to="/about" class="router-link">关于</router-link>
        </el-menu-item>
      </el-menu>
    </el-col>
  </el-row>

</template>

<script>
  export default {
    components: {},
    name: 'ViMenu',
    data() {
      return {
      };
    },
    methods: {

    }
  }
</script>
<css>

</css>