<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。