elementui使用:default-active=“onRoutes“不起作用的原因

//html
<el-menu
        class="sidebar-el-menu"
        :default-active="onRoutes"
        :collapse="collapse"
        background-color="#334256"
        text-color="#ffffff"
        active-text-color="#20afff"
        router
    >

        <template v-for="item in items">
            <template>
                <el-menu-item :index="item.index" :key="item.index">
                    <i :class="item.icon"></i>
                    {{ item.title }}
                </el-menu-item>
            </template>
        </template>
    </el-menu>
//js zhong
data(){
        return {
            items:[
                {
                    icon: 'el-icon-document',
                    index: 'adIndex', //这个
                    title: '系统首页'
                },
                {
                    icon: 'el-icon-document',
                    index: 'adConsumer',
                    title: '用户管理'
                },
                {
                    icon: 'el-icon-document',
                    index: 'adChatroom',
                    title: '聊天房间管理'
                },
                {
                    icon: 'el-icon-document',
                    index: 'adArticle',
                    title: '文章管理'
                },
                {
                    icon: 'el-icon-document',
                    index: 'adReadtype',
                    title: '文章类别管理'
                },
                {
                    icon: 'el-icon-document',
                    index: 'adPsychologist',
                    title: '心理咨询师管理'
                },
                
                {
                    icon: 'el-icon-document',
                    index: 'adNotice',
                    title: '公告管理'
                },
                {
                    icon: 'el-icon-document',
                    index: 'adComment',
                    title: '评论管理'
                },
                {
                    icon: 'el-icon-document',
                    index: 'adFeedback',
                    title: '反馈管理'
                }
            ],
            // 是否折叠菜单
            collapse: false,
            // flag: "点我收起",
        }
    },
computed:{
        onRoutes(){
            console.log(this.$route.path.split('/'));
            return this.$route.path.split('/')[2]
        }
    }

正确的代码如上。

如下是错误的写法，原因为我的$route.path返回的路径是replace之后的为adhomeadIndex，而我的index写adIndex，两个路径不一样，所以浏览器解析时无法根据相同的路径去显示高亮

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

解决办法就是让onRoutes返回的数据和index显示的数据一样就可以。