Element navigation refresh does not show problems

Why can"t I do this? is it because these are the reasons for sub-routing

< 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="-sharp25283A" text-color="-sharpfff" active-text-color="-sharpffd04b">
            <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("/","");
        }
}

};

<template> <el-row style="border-bottom: 1px solid -sharpeee;"> <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>