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等存储方式进行状态管理。