element-ui中導(dǎo)航組件menu的一個屬性:default-active說明

更新時間：2022年05月23日 11:31:22 作者：Shaojun_jita

這篇文章主要介紹了element-ui中導(dǎo)航組件menu的一個屬性:default-active說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

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

在這里插入圖片描述

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

操作代碼如下：

在這里插入圖片描述

我們需要動態(tài)的綁定default-active

在這里插入圖片描述

default-active的使用

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

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

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

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

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

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

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

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

注：

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

語法：

// 保存數(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什么時候使用

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

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

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

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

您可能感興趣的文章: