elementUI導航欄官網

1. 安裝 elementUI
2. 文件準備
3. 配置路由
4. 導航欄代碼

---

一、安裝 elementUI

npm i element-ui -S；

在 main.js 中注冊組件：

import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI);

app.vue 也有在外面套了一層 <keep-alive>，我這里通常都是直接用的 <router-view/>，具體看項目需求。

<template><div id="app"><router-view/></div> </template>

二、文件準備

要做如下左邊的導航欄，我們首先要有對應的文件夾和文件來存放與導航欄對應的頁面，還要一個專門寫導航欄的組件頁。

在 vue-cli3 中，頁面都是存放在 views 中，組件仍然放在 components 中。具體如下：

三、配置路由

1. 捕獲所有路由或 404 Not found 路由；

2. 解決重復點擊同一導航時報錯問題參考執著菜鳥一顆心；

3. 配置路由中的用到的字段：

• hidden：false 表示不隱藏，會在導航欄中展示；true 表示隱藏，在導航欄中不會顯示出來。
• leaf：false 表示多個節點，有子菜單；true 表示只有一個節點，單個菜單。
• 注意： name 最好不用用中文，在 meta 中寫自己需要的字段。

我在項目中路由配置是這樣的：

import Vue from 'vue' import VueRouter from 'vue-router'import MyLayout from '@/components/MyLayout' import notFound from '@/components/404'Vue.use(VueRouter)const routes = [ //當 Home 頁是個獨立的頁面，與導航欄中的頁面都不相關時， //直接用 comonent 引入Home組件，記得要 import。// { // path: '/',// name: 'Home',// meta: { hidden: true },// component: Home// },{ //這里列舉的是 Home 頁也是“處理中心”的列表頁，用 redirect 重定向到配置“處理中心”的 path 上去path: '/',name: 'Home',meta: { hidden: true },redirect: "/dealCenter"},//因為導航到的每個頁面，都包含了導航欄、頭部、底部、主體部分（統一到MyLayout組件中）//所以我每個菜單都會讓根菜單component: MyLayout，再用 redirect 找到原本component的主體頁面。（有多個子菜單的 redirect 可以省略）{ path: '/dealCenter',name: 'dealCenter',component: MyLayout,redirect: "/dealCenter/list",meta:{title: "處理中心",hidden: false, leaf: true},children: [{path: "list",name: "dealCenter_list",meta: { title: "處理中心列表" },component: () => import('@/views/dealCenter/list.vue')}]},{path: '/myWorkbench',name: 'myWorkbench',component: MyLayout,redirect: "/myWorkbench/workbenchOne",meta:{title: "我的工作臺",hidden: false, leaf: false},children: [{path: "workbenchOne",name: "workbench_one",meta: { title: "工作臺一" },component: () => import('@/views/myWorkbench/workbenchOne.vue')},{path: "workbenchTwo",name: "workbench_two",meta: { title: "工作臺二" },component: () => import('@/views/myWorkbench/workbenchTwo.vue')},{path: "workbenchThr",name: "workbench_thr",meta: { title: "工作臺三" },component: () => import('@/views/myWorkbench/workbenchThr.vue')}]},{path: '/infoCenter',name: 'infoCenter',component: MyLayout,redirect: "/infoCenter/infoOne",meta:{title: "消息中心",hidden: false, leaf: false},children: [{path: "infoOne",name: "info_one",meta: { title: "消息一" },component: () => import('@/views/infoCenter/infoOne.vue')},{path: "infoTwo",name: "info_two",meta: { title: "消息二" },component: () => import('@/views/infoCenter/infoTwo.vue')},{path: "infoThr",name: "info_thr",meta: { title: "消息三" },component: () => import('@/views/infoCenter/infoThr.vue')}]},{path: '/orderManage',name: 'orderManage',component: MyLayout,redirect: "/orderManage/list",meta:{title: "訂單管理",hidden: false, leaf: true},children: [{path: "list",name: "orderManage_list",meta: { title: "訂單管理列表" },component: () => import('@/views/orderManage/list.vue')}]},{ //404頁面的配置通常放到最末尾，具體查看上面鏈接path: '*',name: 'notFound',meta:{ hidden: true },component: notFound}, ]const routerPush = VueRouter.prototype.push; VueRouter.prototype.push = function (location) {return routerPush.call(this, location).catch(error => error) }const router = new VueRouter({mode: 'history',base: process.env.BASE_URL,routes })export default router

當在地址欄中輸入路由，可以成功展示對面的頁面內容時，說明配置的路由沒有問題。

四、導航欄代碼

導航欄 NavMenu -> index.vue 代碼：

<template><el-menurouter:default-active="$route.path"active-text-color="#ff9900"><template v-for="(menu, menuId) in $router.options.routes"><!-- 菜單不隱藏,hidden=false。 --><template v-if="!menu.meta.hidden"><!-- 判斷是否只有一個節點 --><el-menu-item v-if="menu.meta.leaf" :index="menu.redirect" :key="menuId"><i class="el-icon-setting"></i><span slot="title">{{menu.meta.title}}</span></el-menu-item><!-- 多個節點 --><el-submenu v-else :index="menu.path" :key="menuId"><template slot="title"><i class="el-icon-location"></i><span>{{menu.meta.title}}</span></template><el-menu-item-group><el-menu-item v-for="(child,childId) in menu.children" :key="childId":index="menu.path +'/'+ child.path">{{child.meta.title}}</el-menu-item></el-menu-item-group></el-submenu></template></template></el-menu> </template>

總結

以上是生活随笔為你收集整理的手把手教你用 elementUI 实现导航栏的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。