vue2.0使用mint-ui tabbar刷新后selected

Question

mint-ui的tabbar组件
tab切换通过router.push('')进行路由
但是刷新以后，tab选项的is-selected状态就会回到第一项
我要如何保存当前的选项。

<template>
  <div id="app">
      <mt-tabbar v-model="selected">
        <mt-tab-item id="home">
          <img slot="icon" src="">
          外卖
        </mt-tab-item>
        <mt-tab-item id="order">
          <img slot="icon" src="">
          订单
        </mt-tab-item>
        <mt-tab-item id="find">
          <img slot="icon" src="">
          发现
        </mt-tab-item>
        <mt-tab-item id="person">
          <img slot="icon" src="">
          我的
        </mt-tab-item>
      </mt-tabbar>
      <router-view></router-view>
  </div>
</template>

export default {
  name: 'App',
  router,
  data(){
      return { selected: 'home'}
  },
  watch: {
      selected: function (val) {
          router.push(val)
      }
  }
}

Answer 1

我也碰见这个问题了，直接放弃这个组件了，自己写了个

Answer 2

昨晚找到的解决方案如下，
还有另外一种是根据url判断，因为刷新不会改变路由（这个方法没试过）

watch: {
      selected: function (val, oldVal) {
          router.push(val)
           window.localStorage.setItem('navTabIndex',val);
      }
  },
  created: function(){
          let localData = window.localStorage.getItem('navTabIndex')
          this.selected = localData
    }
  }

Answer 3

存到localStorage里