muse-ui使用Bottom Navigation組件刷新后保存點擊狀態

一、描述：最近做的移動端H5網頁，使用的時vue+muse-ui 。 muse-ui官網。muse-ui組件豐富，對移動端支持友好，同時具有比較詳細的文檔和示例，是一款值得擁抱的ui庫。安裝和使用方法可以直接點擊官網鏈接。

二、直接上手

先隨便來個圖：

這樣子的導航欄在移動端中司空見慣，使用muse-ui中得Bottom Navigation組件。
我這里直接粘一個muse-ui中的例子噢：

<mu-container style="max-width: 400px; width:100%;">
  <mu-bottom-nav :value="bottomNav" >
    <mu-bottom-nav-item value="movies" title="Movies" icon="ondemand_video" to="/movies"></mu-bottom-nav-item>
    <mu-bottom-nav-item value="music" title="Music" icon="music_note" to="/music"></mu-bottom-nav-item>
    <mu-bottom-nav-item value="books" title="Books" icon="books" to="/books"></mu-bottom-nav-item>
    <mu-bottom-nav-item value="pictures" title="Pictures" icon="photo" to="/pictures"></mu-bottom-nav-item>
  </mu-bottom-nav>
</mu-container>
<script>
export default {
  data () {
    return {
      bottomNav: 'movies'
    }
  }
}
</script>

先講解一下噢，title指的是導航顯示的名稱，icon是圖標，to是鏈接的頁面路由
以上代碼中，是完全能夠實現底部導航的切換效果的，這里注意一下，muse-ui的圖標庫國內仿佛是被牆了，因此加載不出來，使用自己的圖標庫可以替代。好了繼續。這樣直接復制粘貼的代碼很快會發現，在頁面刷新時按鈕狀態並不會被保存下來。

方法一：

<mu-bottom-nav-item value="movies" title="Movies" icon="ondemand_video"></mu-bottom-nav-item>
請注意每個子元素所對應的value值
muse-ui文檔中有說明：value 當value 與父組件的 value值相等時，會變成選中狀態
因此，我們需要定義一個方法：

methods: {
    fetchData () { // 隨便起一個名字
        // 這里要根據你自己路由的名稱，指定與之對應的bottomNav值
        if (this.$route.path === "/movies") {
            this.bottomNav = "movies"
        }
        if (this.$route.path === "/music") {
            this.bottonNav = "music"
        }
        .....
    }
}

在created中調用此方法：

created () {
    this.fetchData ()
}

加上一個路由監聽事件：

watch: {
    '$route': 'fetchData'
}

完整代碼：
以下便可以實現導航欄狀態的保存啦。

<template>
<mu-container style="max-width: 400px; width:100%;">
  <mu-bottom-nav :value="bottomNav" >
    <mu-bottom-nav-item value="movies" title="Movies" icon="ondemand_video" to="/movies"></mu-bottom-nav-item>
    <mu-bottom-nav-item value="music" title="Music" icon="music_note" to="/music"></mu-bottom-nav-item>
    <mu-bottom-nav-item value="books" title="Books" icon="books" to="/books"></mu-bottom-nav-item>
    <mu-bottom-nav-item value="pictures" title="Pictures" icon="photo" to="/pictures"></mu-bottom-nav-item>
  </mu-bottom-nav>
</mu-container>
</template>
<script>
export default {
  data () {
    return {
      bottomNav: 'movies'
    }
  },
  created() {
        this.fetchData()
   },
    watch: {
        '$route': 'fetchData'
    },
    methods: {
         fetchData () {
            if (this.$route.path === "/movies") {
                this.bottomNav = "movies"
            }
            if (this.$route.path === "/music") {
                this.bottonNav = "music"
            }
            if (this.$route.path === "/books") {
                this.bottomNav = "books"
            } 
            if (this.$route.path === "/pictures") {
                this.bottomNav = "pictures"
            }
        }
    }

方法二：

在mu-bottom-nav 中添加change方法
<mu-bottom-nav :value="bottomNav" @change="handleChange">
修改子組件中value的名稱

<mu-bottom-nav-item value="0" title="Movies" icon="ondemand_video" to="/movies"></mu-bottom-nav-item>
<mu-bottom-nav-item value="1" title="Music" icon="music_note" to="/music"></mu-bottom-nav-item>
<mu-bottom-nav-item value="2" title="Books" icon="books" to="/books"></mu-bottom-nav-item>
<mu-bottom-nav-item value="3" title="Pictures" icon="photo" to="/pictures"></mu-bottom-nav-item>

在methods中定義方法：

methods: {
    handleChange (val) {
        this.bottomNav = val // 這里的val輸出是導航欄的下標
        // 使用任何一種存儲狀態的方法，vuex也好，我這里使用sessionStorage
        sessionStorage.setItem('navItem', this.bottomNav) //存儲狀態
    }
}
在mounted時候取出存的狀態賦值給bottomNav

mounted () {
this.bottomNav = sessionStorage.getItem('navItem')
}
完整代碼：

<template>
<mu-container style="max-width: 400px; width:100%;">
  <mu-bottom-nav :value="bottomNav"   @change="handleChange">
    <mu-bottom-nav-item value="0" title="Movies" icon="ondemand_video" to="/movies"></mu-bottom-nav-item>
    <mu-bottom-nav-item value="1" title="Music" icon="music_note" to="/music"></mu-bottom-nav-item>
    <mu-bottom-nav-item value="2" title="Books" icon="books" to="/books"></mu-bottom-nav-item>
    <mu-bottom-nav-item value="3" title="Pictures" icon="photo" to="/pictures"></mu-bottom-nav-item>
  </mu-bottom-nav>
</mu-container>
</template>
<script>
export default {
  data () {
    return {
      bottomNav: '0'
    }
  },
  mounted() {
         this.bottomNav = sessionStorage.getItem('navItem')
   },
    methods: {
         handleChange (val) {
            this.bottomNav = val
            sessionStorage.setItem('navItem', this.bottomNav) //存儲狀態
        }
    }

以上代碼只可刷新后保存狀態，在項目中沒辦法規定用戶是否不會手動輸入路由跳轉，因此方法一可以說是更好的選擇，具體可根據需求選擇更好的方式～
以上代碼更適用於簡潔的底部導航，復雜的導航最好配合使用v-for和vuex等存儲方式進行狀態管理。