9.左邊導航選單
左邊導航選單製作
Element UI框架裡面有NavMenu 導航選單,有頂欄、側欄和摺疊的導航選單,我們這次要用的是側欄
把側欄的
<el-container> <el-aside width="200px"> <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"> <el-submenu index="1"> <template slot="title"> <i class="el-icon-location"></i> <span>導航一</span> </template> <el-menu-item-group> <template slot="title">分組一</template> <el-menu-item index="1-1">選項1</el-menu-item> <el-menu-item index="1-2">選項2</el-menu-item> </el-menu-item-group> <el-menu-item-group title="分組2"> <el-menu-item index="1-3">選項3</el-menu-item> </el-menu-item-group> <el-submenu index="1-4"> <template slot="title">選項4</template> <el-menu-item index="1-4-1">選項1</el-menu-item> </el-submenu> </el-submenu> <el-menu-item index="2"> <i class="el-icon-menu"></i> <span slot="title">導航二</span> </el-menu-item> <el-menu-item index="3" disabled> <i class="el-icon-document"></i> <span slot="title">導航三</span> </el-menu-item> <el-menu-item index="4"> <i class="el-icon-setting"></i> <span slot="title">導航四</span> </el-menu-item> </el-menu> </el-aside> <el-main>Main</el-main> </el-container> </el-container>
我們只需要一個一級導航,兩個二級導航,所以需要刪掉一些程式碼,刪掉後的程式碼和效果如下:
<el-container> <el-aside width="200px"> <el-menu> <el-submenu index="1"> <template slot="title"> <i class="el-icon-location"></i> <span>導航一</span> </template> <el-menu-item-group> <el-menu-item index="1-1">選項1</el-menu-item> <el-menu-item index="1-2">選項2</el-menu-item> </el-menu-item-group> </el-submenu> </el-menu> </el-aside> <el-main>Main</el-main> </el-container>
這兩個選項點選是可以跳轉到其他頁面的,為了測試一個現在views資料夾裡面新建兩個vue元件,Test1.vue和Test2.vue,新建的vue元件不能直接跳轉,還需要在router檔案中的index.js檔案裡面匯入才可以用
導航欄的點選事件
在
<el-aside width="200px"> <el-menu @select="menuClick"> <el-submenu index="1"> <template slot="title"> <i class="el-icon-location"></i> <span>導航一</span> </template> <el-menu-item-group> <el-menu-item index="1-1">選項1</el-menu-item> <el-menu-item index="1-2">選項2</el-menu-item> </el-menu-item-group> </el-submenu> </el-menu> </el-aside>
methods: {
menuClick(index,indexPath){
console.log(index);
console.log(indexPath);
},
commandHandler(cmd) { //該方法有一個引數,cmd
if (cmd == 'logout') {
this.$confirm('此操作將登出登入, 是否繼續?', '提示', {
confirmButtonText: '確定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.getRequest("/logout"); //使用封裝好的getRequest方法,引數寫登出登入的地址
window.sessionStorage.removeItem("user")
this.$router.replace("/");
}).catch(() => {
this.$message({
type: 'info',
message: '已取消操作'
});
});
}
}
}
控制檯輸出效果如下:
完善meunClick方法
methods: {
menuClick(index){
this.$router.push(index)
},
}
完善該menuClick方法之後,瀏覽器效果如下:點選選項1,就直接跳轉到test1的單獨頁面,選項2也是
這時有人會說直接把App.vue裡面的
<el-main>
<router-view/>
</el-main>
但是執行的效果還是會跳轉到單獨的test1和test2頁面,其實解決方法也很容易
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../views/Login.vue'
import Home from '../views/Home.vue'
import Test1 from '../views/Test1.vue'
import Test2 from '../views/Test2.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Login',
component: Login
},
{
path: '/home',
name: 'Home',
component: Home
},
{
path: '/home',
name: 'Home',
component: Home,
children:[
{
path: '/test1',
name: 'Test1',
component: Test1
},
{
path: '/test2',
name: 'Test2',
component: Test2
}
]
}
還沒完,還有一點小問題,新增一個頁面要修改router.vue,還需要繼續新增選項,這就有點麻煩
要把index.js裡面的routers地址陣列動態的渲染到左邊的導航欄裡面去
①在<el-submenu標籤裡面使用v-for進行遍歷所有的routers地址,然後再使用v-if判斷遍歷後的帶有hidden屬性的地址需不需要隱藏起來
②在
<el-menu @select="menuClick">
<!--這個遍歷拿到的是index.js裡面的routers地址陣列 -->
<el-submenu index="1" v-for="(item,index) in this.$router.options.routes"
v-if="!item.hidden" :key="index">
<template slot="title">
<i class="el-icon-location"></i>
<span>{{item.name}}</span>
</template>
<el-menu-item-group>
<!--動態顯示當前欄目的子欄目內容-->
<el-menu-item :index="child.path" v-for="(child,index) in
item.children" :key="index">{{child.name}}</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
Element UI導航欄也可以不需要使用@select="menuClick" 點選方法,可以直接加上一個router屬性即可,效果同前面一樣的。
下面是詳細的Home.vue程式碼和index.js的程式碼
<template>
<div>
<el-container>
<el-header class="homeHeader">
<div class="title">微人事</div>
<el-dropdown class="userInfo" @command="commandHandler">
<!--@command="commandHandler" 點選選單項觸發的事件回撥-->
<span class="el-dropdown-link">
{{user.name}}<i><img :src="user.userface" alt=""></i> <!--i標籤表示目標-->
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="userInfo">個人中心</el-dropdown-item>
<el-dropdown-item command="setting">設定</el-dropdown-item>
<!--disabled:禁用的 divided:有分隔線-->
<el-dropdown-item command="logout" divided>登出登入</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-header>
<el-container>
<el-aside width="200px">
<el-menu @select="menuClick" router>
<!--這個遍歷拿到的是index.js裡面的routers地址陣列 -->
<el-submenu index="1" v-for="(item,index) in this.$router.options.routes"
v-if="!item.hidden" :key="index">
<template slot="title">
<i class="el-icon-location"></i>
<span>{{item.name}}</span>
</template>
<el-menu-item-group>
<!--動態顯示當前欄目的子欄目內容-->
<el-menu-item :index="child.path" v-for="(child,index) in
item.children" :key="index">{{child.name}}</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</el-aside>
<el-main><router-view/></el-main>
</el-container>
</el-container>
</div>
</template>
<script>
export default {
name: "Home",
data() {
return {
//這樣得到的資料是字串,要用JSON.parse方法吧字串轉換成json資料
user: JSON.parse(window.sessionStorage.getItem("user"))
}
},
methods: {
// menuClick(index){
// // console.log(index);
// // console.log(indexPath);
// this.$router.push(index)
// },
commandHandler(cmd) { //該方法有一個引數,cmd
if (cmd == 'logout') {
this.$confirm('此操作將登出登入, 是否繼續?', '提示', {
confirmButtonText: '確定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.getRequest("/logout"); //使用封裝好的getRequest方法,引數寫登出登入的地址
window.sessionStorage.removeItem("user")
this.$router.replace("/");
}).catch(() => {
this.$message({
type: 'info',
message: '已取消操作'
});
});
}
}
}
}
</script>
<style>
.homeHeader {
background-color: #409eff;
display: flex;
align-items: center; /*豎軸上居中*/
justify-content: space-between; /*空白的地方在中間*/
padding: 0 15px;
box-sizing: border-box;
}
.title {
font-size: 30px;
font-family: 華文行楷;
color: #ffffff;
}
.userInfo {
cursor: pointer;
}
.el-dropdown-link img {
width: 48px;
height: 48px;
border-radius: 24px;
margin-left: 8px;
}
.el-dropdown-link {
display: flex;
align-items: center;
}
</style>
index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../views/Login.vue'
import Home from '../views/Home.vue'
import Test1 from '../views/Test1.vue'
import Test2 from '../views/Test2.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Login',
component: Login,
hidden:true
},
{
path: '/home',
name: 'Home',
component: Home,
hidden:true //做個標記,然後在Home.vue裡面判斷
},
{
path: '/home',
name: '導航一',
component: Home,
children: [
{
path: '/test1',
name: '選項一',
component: Test1
},
{
path: '/test2',
name: '選項二',
component: Test2
}
]
}
]
const router = new VueRouter({
routes
})
export default router