vue?iview?導航高亮動態(tài)設(shè)置方式
vue iview導航高亮動態(tài)設(shè)置
在開發(fā)的是時候，路由發(fā)生了跳轉(zhuǎn)但是發(fā)現(xiàn)導航的沒有進行高亮設(shè)置，在iview的menu組件中控制高亮的是active-name，現(xiàn)在動態(tài)設(shè)置active-name 完成高亮
<Menu :active-name="activeName" theme="light" width="auto" :open-names="['2','3','4']"> <Submenu name="2"> <template slot="title"> <Icon type="ios-navigate"></Icon> 信息查詢 </template> <MenuItem name="travel/" to="travel">信息查詢</MenuItem> </Submenu> <Submenu name="3" v-if="is_super"> <template slot="title"> <Icon type="ios-keypad"></Icon> 信息管理 </template> <MenuItem name="TravelManage" to='TravelManage'>信息管理</MenuItem> </Submenu> <Submenu name="4"> <template slot="title"> <Icon type="ios-contact"></Icon> 個人信息 </template> <MenuItem name="UserInform" to='UserInform'>個人資料</MenuItem> </Submenu> </Menu>
export default {
name: '',
data() {
return {
activeName: this.$router.path,
}
},
methods:{
menuList(){ // 這個方法里定義好，高亮和路由
let path = this.$route.matched[1].path
this.activeName=path.substr(1)
}
},
mounted() {
this.menuList()
}
}vue element導航欄高亮顯示問題
用導航菜單時遇到的一些問題：點擊打開官網(wǎng)例子
問題1
頁面強制刷新，按F5時，頁面如果沒有好好設(shè)置的話，導航欄默認疊起來，而且無高亮顯示；刷新后導航欄顯示和之前不一致，如圖所示
解決：
html關(guān)鍵代碼設(shè)置 :default-active="defaultUrl"
這兒的原理就是defaultUrl跟#/后面的一致，也就是說跟router.js中的path一致才行（router.js見后文）
window.location.href.split('/#')[1] 獲取的是"http://localhost:8080/#/search-contact/1"中的"/search-contact/1"
這樣設(shè)置后，無論如何刷新頁面，頁面都會高亮顯示當前url
問題2
點擊瀏覽器前進后退按鈕導致高亮顯示不同步，
解決問題關(guān)鍵，和問題一原理一樣，當路由變化時，改變默認顯示高亮的值
//監(jiān)聽路由變化
watch: {
'$route':'getPath'
},
methods: {
getPath(){
this.defaultUrl = this.$route.path;
}
},補充：
以上，div和js文件在設(shè)置菜單欄的menu.vue文件下。
router.js里面這樣設(shè)置
import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
import Home from './views/home';
import SearchProperty from './views/search/search-property';
import SearchListing from './views/search/search-listing';
import SearchContact from './views/search/search-contact';
import SearchSchool from './views/search/search-school';
export default new Router({
routes: [
{name: 'home', path: '/', component: Home},
{name: 'search-property', path: '/search-property/:pageNum', component: SearchProperty},
{name: 'search-contact', path: '/search-contact/:pageNum', component: SearchContact},
{name: 'search-listing', path: '/search-listing/:pageNum', component: SearchListing},
{name: 'search-school', path: '/search-school/:pageNum', component: SearchSchool},
],
});補充：這是目前發(fā)現(xiàn)最簡單的一種方法
<el-menu router :default-active="$route.path"> </el-menu>
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
在Vue 中實現(xiàn)循環(huán)渲染多個相同echarts圖表
這篇文章主要介紹了在Vue 中實現(xiàn)循環(huán)渲染多個相同echarts圖表，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue19 組建 Vue.extend component、組件模版、動態(tài)組件 的實例代碼
這篇文章主要介紹了vue19 組建 Vue.extend component、組件模版、動態(tài)組件 的實例代碼,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-04-04
這篇文章主要介紹了Vue如何實現(xiàn)table表格置頂，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue 2.0的數(shù)據(jù)依賴實現(xiàn)原理代碼簡析
本篇文章主要介紹了Vue 2.0的數(shù)據(jù)依賴實現(xiàn)原理代碼簡析，主要從初始化的數(shù)據(jù)層面上分析了Vue是如何管理依賴來到達數(shù)據(jù)的動態(tài)響應，有興趣的可以了解一下2017-07-07
今天小編就為大家分享一篇vue路由切換之淡入淡出的簡單實現(xiàn)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
Springboot運用vue+echarts前后端交互實現(xiàn)動態(tài)圓環(huán)圖
我們做項目的時候，常常需要一些統(tǒng)計圖來展示我們的數(shù)據(jù)，作為web開發(fā)人員，會實現(xiàn)統(tǒng)計圖是我們必會的技能。我將帶大家來實現(xiàn)動態(tài)餅圖的實現(xiàn)，感興趣的可以了解一下2021-06-06
下面小編就為大家?guī)硪黄猇ue渲染函數(shù)詳解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
解決vue-cli@3.xx安裝不成功的問題及搭建ts-vue項目
這篇文章主要介紹了解決vue-cli@3.xx安裝不成功的問題及搭建ts-vue項目.文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-02-02
vue element-ui 綁定@keyup事件無效的解決方法
遇到vue element-ui 綁定@keyup事件無效的問題怎么解決？下面小編就為大家分享一篇vue element-ui 綁定@keyup事件無效的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
vue3中引入新的組件傳值方式,就是provide/inject依賴注入模式,本文主要介紹了vue3+ts 依賴注入provide inject的用法,感興趣的可以了解一下2023-11-11