都知道 移动端项目往往底部会有一个导航 ，但我们在vue每次初始化的时候 底部导航会重新回到首页，或者是用户直接登录购物车的时候,提示用户登录要跳转到 登录界面，这个时候底部导航应该是跟着跳转的，而不应该保持在购物车的那个导航

我这里使用的是 vant的 ui组件 有个方法叫做 change 一旦导航改变就会触发

<template>

  <van-tabbar v-model="active" @change="change">

    <van-tabbar-item icon="wap-home" to="/">首页</van-tabbar-item>

    <van-tabbar-item icon="records" to="/category">分类</van-tabbar-item>

    <van-tabbar-item icon="cart" to="/cart">购物车</van-tabbar-item>

    <van-tabbar-item icon="manager" to="/profile">我的</van-tabbar-item>

  </van-tabbar>

</template>

 

<script>

export default {

  data() {

    return {

      active: 0  //  导航默认下标是 0 指向的首页

    }

  },

  created() {

    this.active = JSON.parse(localStorage.getItem('active'))  // 每次进入组价的时候 从本地缓存中取出

  },

// 每次 改变将改变的数值 存入 本地缓存中

  methods: {

    change(active) {

      localStorage.setItem('active', active)

    }

  },

// 监听 导航栏的变化   

  watch: {

    $route() {

      switch (this.$route.path) {

        case '/':

          this.active = 0

          break

        case '/category':

          this.active = 1

          break

        case '/cart':

          this.active = 2

          break

        case '/profile':

          this.active = 3

          break

        default:

          this.active = -1

          break

      }

    }

  }

}

大体的实现思路就是这样的