element-ui 導航選單 和 麵包屑 聯動
阿新 • • 發佈:2022-03-11
1. 導航選單設定成router 模式
2. 麵包屑元件監聽路由變化
// Bread.vue <template> <div class="bread-crumb-container"> <el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb-item v-for="item in currentRoute" :key="item.uid"> {{item.name}} </el-breadcrumb-item> </el-breadcrumb> </div> </template> <script> import { Breadcrumb, BreadcrumbItem } from "element-ui"; export default { name: "BreadCrumbContainer", data() { return { currentRoute: [], }; }, props: {}, components: { [Breadcrumb.name]: Breadcrumb, [BreadcrumbItem.name]: BreadcrumbItem, }, mounted() {}, methods: { updateRoute(newRoute) { let currentRoute = []; let matched = newRoute.matched; // 獲取當前路由的路徑物件 if (matched) { matched .filter((item) => item.name) .forEach((item) => { currentRoute.push({ path: item.path, name: item.name, }); }, []); } this.currentRoute = currentRoute; }, }, created() { let route = this.$route; this.updateRoute(route); }, watch: { $route(newRoute) { this.updateRoute(newRoute); }, }, }; </script>
3. 附動態導航選單生成:
3.1 遞迴多層選單子元件:
// 選單外層元件:MenuList.vue <template> <div class="aside-menu-list"> <el-menu default-active="/" @open="handleOpen" @close="handleClose" router> <menu-item-temp :routerItems="routerList"></menu-item-temp> </el-menu> </div> </template> <script> import { Menu } from "element-ui"; import MenuItemTemp from "@layout/components/MenuItemTemp"; export default { name: "MenuList", data() { return { routerList: [ { path: "/code", name: "路由", icon: "el-icon-star-on", children: [ { path: "/code/reg", name: "正則表示式", icon: "el-icon-guide", children: [ { path: "/code/reg", name: "正則表示式", icon: "el-icon-guide", }, ], }, ], }, { path: "/settings", name: "設定", icon: "el-icon-tools", children: [ { path: "/settings/users", name: "個人中心", icon: "el-icon-user", }, ], }, ], }; }, mounted() {}, components: { [Menu.name]: Menu, MenuItemTemp, }, methods: { handleOpen(index, indexPath) { console.log("open", index, indexPath); }, handleClose() {}, }, }; </script> <style lang="less" scoped> @import "~@style/modules/variables.less"; .aside-menu-list { /deep/ .el-menu { text-align: left; i { color: @cl-main; font-weight: bold; } } } </style>
3.2 遞迴多層選單子元件:
// MenuItemTemp.vue <template> <div class="menu-item-container"> <template v-for="routerItem in routerItems"> <template v-if="routerItem.children"> <el-submenu :index="routerItem.path" :key="routerItem.uid" v-if="routerItem.name" > <template slot="title"> <i :class="routerItem.icon"></i> <span>{{ routerItem.name }}</span> </template> <!-- 遞迴 --> <menu-item-temp :routerItems="routerItem.children" :parentRoute="routerItem.path" ></menu-item-temp> </el-submenu> </template> <template v-else> <el-menu-item :index="routerItem.path" :key="routerItem.uid" v-if="routerItem.name" > <i :class="routerItem.icon"></i> <span>{{ routerItem.name }}</span> </el-menu-item> </template> </template> </div> </template> <script> import { Submenu, MenuItemGroup, MenuItem } from "element-ui"; export default { name: "MenuItemTemp", props: { routerItems: { type: [Array, null], }, }, components: { [Submenu.name]: Submenu, [MenuItemGroup.name]: MenuItemGroup, [MenuItem.name]: MenuItem, }, data() { return {}; }, mounted() {}, methods: {}, }; </script> <style lang="less" scoped> @import "~@style/modules/variables.less"; .menu-item-container { } </style>