解決Element-UI 側邊欄頁面刷新後不高亮顯示的問題

<el-menu class="el-menu-vertical-demo" :default-active="$route.path">
    <template v-for="item in list">
        <router-link :to="{path:item.url}" v-if="item.children" :key="item.name">
            <el-submenu :index="item.url" @click="menuClick(item.name)">
                <template slot="title">
                    <!--<img :src="item.name === selectedMenuId ? item.mediumBg : item.medium">-->
                    <i class="icon el-icon-edit"></i>
                    <span>{{item.name}}</span>
                </template>
                <el-menu-item v-for="subItem in item.children" :index="subItem.name" :key="subItem.name">
                    <router-link :to="{path:subItem.url}">
                        {{subItem.name}}

                    </router-link>
                </el-menu-item>
            </el-submenu>
        </router-link>
        <router-link :to="{path:item.url}" :key="item.name" v-else>
            <el-menu-item :index="item.url" @click="menuClick(item.name)">
                <template slot="title">
                    <!--<img :src="item.name === selectedMenuId ? item.mediumBg : item.medium">-->
                    <i class="icon el-icon-edit"></i>
                    <span>{{item.name}}</span>
                </template>
            </el-menu-item>
        </router-link>
    </template>
</el-menu>

 

這裏我使用了:
router模式,啓用該模式會在激活導航時以 index 作爲 path 進行路由跳轉,所以我將el-menu-item的index設置成了path路由
default-active則是當前激活菜單的index。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章