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