資訊專欄INFORMATION COLUMN
摘要：前言記錄一次跳轉(zhuǎn)路由時，導(dǎo)航欄選中消失的神秘事件。事情原圖請看這張圖，一開始路由跳轉(zhuǎn)到這頁面時，導(dǎo)航欄是有高亮的，但是在刷新的時候，高亮就消失了總所周知，客戶是一種可以從雞蛋里面挑出骨頭的神秘生物。
1.前言
記錄一次跳轉(zhuǎn)路由時，導(dǎo)航欄選中消失的神秘事件。
請看這張圖，一開始路由跳轉(zhuǎn)到這頁面時，導(dǎo)航欄是有高亮的，但是在刷新的時候，高亮就消失了；
總所周知，客戶是一種可以從雞蛋里面挑出骨頭的神秘生物。
頁面代碼
邏輯代碼
props: {
collapsed: {
type: Boolean,
default: false
},
menuList: {
type: Array,
default: () => []
}
},
methods: {
handleSelect(name) {
this.$router.push({ name: `${name}` });
}
}
上述代碼是我封裝到公共組件的導(dǎo)航欄代碼，主要是判斷是否有多級菜單（這不是我們重點(diǎn)）。
4.解答遇到問題就要解決，不懂的情況下，只好上網(wǎng)找答案了，但是網(wǎng)絡(luò)上的答案五花八門，看的你眼花繚亂。
最后還是靠自己摸索了
首先我的路由給需要跳轉(zhuǎn)的頁面都會加上name值，當(dāng)然也有些頁面不需要name值，跳轉(zhuǎn)的方式是this.$router.push();
iview官網(wǎng)有提供一個參數(shù)，active-name，這個就好像css里面的active，可以選中指定的菜單
在封裝的組件頁面綁定當(dāng)前要指定的菜單
這里要用到mounted生命周期，在頁面渲染后得到導(dǎo)航欄的name值，網(wǎng)上說還要用updated這個生命周期，其實不需要；
點(diǎn)擊跳轉(zhuǎn)的時候，跳到與路由name值相同的頁面
詳細(xì)代碼：
//template
//script
data() {
return {
isShow: "test-group"
};
},
props: {
collapsed: {
type: Boolean,
default: false
},
menuList: {
type: Array,
default: () => []
}
},
mounted() {
this.isShow = this.$route.name;
},
methods: {
handleSelect(name) {
this.isShow = name;
this.$router.push({ name: `${name}` });
}
}
這樣就可以解決上述的問題了，其中有些地方說不清的地方請見諒，只是記錄自己開發(fā)時粗心的一面，菜鳥一枚，不喜勿噴！
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/105989.html
摘要：我們參考小程序的設(shè)計思路進(jìn)行了優(yōu)化升級，為每一個需要特有化配置的頁面添加一個格式的配置文件，配置文件包括導(dǎo)航欄的配置頁面級別的配置跳轉(zhuǎn)的配置等，將配置工程化標(biāo)準(zhǔn)化。設(shè)置導(dǎo)航欄按鈕包含按鈕樣式的數(shù)組通過完成按鈕事件的回調(diào)。一、背景1.為什么是Weex在公司快速發(fā)展的大環(huán)境下，App的更新迭代高速、高頻，技術(shù)團(tuán)隊平均兩周便可誕生一款中型App，但App團(tuán)隊只有6個人（iOS 、Android各3...
摘要：需求分析在餓了么首頁中我們能看到這樣的布局如下圖。導(dǎo)航點(diǎn)是使用文件畫的，灰色為未選中，綠色為選中。因為默認(rèn)顯示的是第一頁，所以我們默認(rèn)第一個的導(dǎo)航點(diǎn)是選中的。 1、需求分析 在餓了么首頁中我們能看到這樣的布局（如下圖）。紅框內(nèi)是一個可以左右滑動的頁面，每一個頁面類似于九宮格，都有可供點(diǎn)擊圖標(biāo)。對于這樣的布局，我在網(wǎng)上找了很久都沒有找到相關(guān)的名稱，所以我這里暫時叫它導(dǎo)航頁吧。showIm...
閱讀 918·2021-11-22 13:53
閱讀 2543·2021-10-15 09:40
閱讀 1012·2021-10-14 09:42
閱讀 3587·2021-09-22 15:59
閱讀 899·2021-09-02 09:47
閱讀 2407·2019-08-30 15:54
閱讀 1447·2019-08-29 17:14
閱讀 412·2019-08-29 15:15
