導(dǎo)航組件menu的一個(gè)屬性:default-active

在el-menu中添加屬性，然后就可以得到當(dāng)我們點(diǎn)擊的時(shí)候，就可以達(dá)到高亮的作用。

操作代碼如下：

我們需要?jiǎng)討B(tài)的綁定default-active

default-active的使用

default-active需要傳進(jìn)去的值就是子導(dǎo)航的index值（也就是其路由值），達(dá)到點(diǎn)擊路由就可以引起高亮。

1.首先是在index處動(dòng)態(tài)接收api里面的路由名稱

2.然后點(diǎn)擊事件時(shí)用函數(shù)獲取路由名稱

<!-- 二級(jí)菜單 -->
? ? ? ? ? ? <el-menu-item
? ? ? ? ? ? :index="'/' + items.path"?
? ? ? ? ? ? //首先是在index處動(dòng)態(tài)接收api里面的路由名稱
? ? ? ? ? ? v-for="items in item.children"
? ? ? ? ? ? :key="items.id"
? ? ? ? ? ? @click="activeItem('/' + items.path)"?
? ? ? ? ? ? //然后點(diǎn)擊事件時(shí)用函數(shù)獲取路由名稱
? ? ? ? ? ? >

3.點(diǎn)擊時(shí)，通過函數(shù)將路由值保存到本地,同時(shí)再created里面申明

activeItem (path) {
? ? ? window.sessionStorage.setItem('activePath', path)
? ? ? this.activePath = path
? ? }
created () {
? ? this.activePath = window.sessionStorage.getItem('activePath')
? }

4.然后將本地的路由值動(dòng)態(tài)的傳給default-active

<el-menu :default-active="activePath"></el-menu>

注：

1.sessionStorage 屬性允許你訪問一個(gè)，對(duì)應(yīng)當(dāng)前源的 session Storage對(duì)象。它與  localStorage相似，不同之處在于 localStorage 里面存儲(chǔ)的數(shù)據(jù)沒有過期時(shí)間設(shè)置，而存儲(chǔ)在 sessionStorage 里面的數(shù)據(jù)在頁面會(huì)話結(jié)束時(shí)會(huì)被清除。

語法：

// 保存數(shù)據(jù)到 sessionStorage
sessionStorage.setItem('key', 'value');
?
// 從 sessionStorage 獲取數(shù)據(jù)
let data = sessionStorage.getItem('key');
?
// 從 sessionStorage 刪除保存的數(shù)據(jù)
sessionStorage.removeItem('key');
?
// 從 sessionStorage 刪除所有保存的數(shù)據(jù)
sessionStorage.clear();

2.created什么時(shí)候使用

vue.js中created方法是一個(gè)生命周期鉤子函數(shù)，一個(gè)vue實(shí)例被生成后會(huì)調(diào)用這個(gè)函數(shù)。data與methods已經(jīng)初始化，但是還沒有編譯模板。–【請(qǐng)求數(shù)據(jù)】

一個(gè)vue實(shí)例被生成后還要綁定到某個(gè)html元素上，之后還要進(jìn)行編譯，然后再插入到document中。每一個(gè)階段都會(huì)有一個(gè)鉤子函數(shù)，方便開發(fā)者在不同階段處理不同邏輯。

create方法，在頁面還未渲染成html前，調(diào)用函數(shù)，從后端獲取數(shù)據(jù)，在實(shí)現(xiàn)對(duì)頁面的數(shù)據(jù)進(jìn)行顯示 

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。