亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

解決Vue-iview封裝導(dǎo)航欄刷新，導(dǎo)航欄消失之坑

ACb0y / 3293人閱讀

摘要：前言記錄一次跳轉(zhuǎn)路由時(shí)，導(dǎo)航欄選中消失的神秘事件。事情原圖請(qǐng)看這張圖，一開(kāi)始路由跳轉(zhuǎn)到這頁(yè)面時(shí)，導(dǎo)航欄是有高亮的，但是在刷新的時(shí)候，高亮就消失了總所周知，客戶是一種可以從雞蛋里面挑出骨頭的神秘生物。

1.前言

記錄一次跳轉(zhuǎn)路由時(shí)，導(dǎo)航欄選中消失的神秘事件。

2.事情原圖

請(qǐng)看這張圖，一開(kāi)始路由跳轉(zhuǎn)到這頁(yè)面時(shí)，導(dǎo)航欄是有高亮的，但是在刷新的時(shí)候，高亮就消失了；
總所周知，客戶是一種可以從雞蛋里面挑出骨頭的神秘生物。

3.康康代碼

頁(yè)面代碼

邏輯代碼

props: {
    collapsed: {
      type: Boolean,
      default: false
    },
    menuList: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    handleSelect(name) {
      this.$router.push({ name: `${name}` });
    }
  }

上述代碼是我封裝到公共組件的導(dǎo)航欄代碼，主要是判斷是否有多級(jí)菜單（這不是我們重點(diǎn)）。

4.解答

遇到問(wèn)題就要解決，不懂的情況下，只好上網(wǎng)找答案了，但是網(wǎng)絡(luò)上的答案五花八門(mén)，看的你眼花繚亂。
最后還是靠自己摸索了

首先我的路由給需要跳轉(zhuǎn)的頁(yè)面都會(huì)加上name值，當(dāng)然也有些頁(yè)面不需要name值，跳轉(zhuǎn)的方式是this.$router.push();

iview官網(wǎng)有提供一個(gè)參數(shù)，active-name，這個(gè)就好像css里面的active，可以選中指定的菜單

在封裝的組件頁(yè)面

綁定當(dāng)前要指定的菜單

這里要用到mounted生命周期，在頁(yè)面渲染后得到導(dǎo)航欄的name值，網(wǎng)上說(shuō)還要用updated這個(gè)生命周期，其實(shí)不需要；

點(diǎn)擊跳轉(zhuǎn)的時(shí)候，跳到與路由name值相同的頁(yè)面

詳細(xì)代碼：

//template
    
    // XXXX
    
//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}` });
    }
  }

這樣就可以解決上述的問(wèn)題了，其中有些地方說(shuō)不清的地方請(qǐng)見(jiàn)諒，只是記錄自己開(kāi)發(fā)時(shí)粗心的一面，菜鳥(niǎo)一枚，不喜勿噴！

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/105989.html

相關(guān)文章

  • 加推Weex實(shí)踐之路（上）

    摘要：我們參考小程序的設(shè)計(jì)思路進(jìn)行了優(yōu)化升級(jí)，為每一個(gè)需要特有化配置的頁(yè)面添加一個(gè)格式的配置文件，配置文件包括導(dǎo)航欄的配置頁(yè)面級(jí)別的配置跳轉(zhuǎn)的配置等，將配置工程化標(biāo)準(zhǔn)化。設(shè)置導(dǎo)航欄按鈕包含按鈕樣式的數(shù)組通過(guò)完成按鈕事件的回調(diào)。一、背景1.為什么是Weex在公司快速發(fā)展的大環(huán)境下，App的更新迭代高速、高頻，技術(shù)團(tuán)隊(duì)平均兩周便可誕生一款中型App，但App團(tuán)隊(duì)只有6個(gè)人（iOS 、Android各3...

    shuibo 評(píng)論0 收藏0

  • Android仿餓了么首頁(yè)導(dǎo)航欄（ViewPager）

    摘要：需求分析在餓了么首頁(yè)中我們能看到這樣的布局如下圖。導(dǎo)航點(diǎn)是使用文件畫(huà)的，灰色為未選中，綠色為選中。因?yàn)槟J(rèn)顯示的是第一頁(yè)，所以我們默認(rèn)第一個(gè)的導(dǎo)航點(diǎn)是選中的。 1、需求分析 在餓了么首頁(yè)中我們能看到這樣的布局（如下圖）。紅框內(nèi)是一個(gè)可以左右滑動(dòng)的頁(yè)面，每一個(gè)頁(yè)面類(lèi)似于九宮格，都有可供點(diǎn)擊圖標(biāo)。對(duì)于這樣的布局，我在網(wǎng)上找了很久都沒(méi)有找到相關(guān)的名稱(chēng)，所以我這里暫時(shí)叫它導(dǎo)航頁(yè)吧。showIm...

    lufficc 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<