实现Vue路由切换的监听

沃梦达教程前端开发

2023-10-08 8

我们希望在路由切换的时候能够监听到并且可以触发监听事件下面的标签栏是用vant写的，我想在页面刷新的时候也能选中当前的标签van-tabbar v-model=active active-color=#ee0a24 router placeholder van-tab...

我们希望在路由切换的时候能够监听到并且可以触发监听事件

下面的标签栏是用vant写的，我想在页面刷新的时候也能选中当前的标签

<van-tabbar v-model="active" active-color="#ee0a24" router placeholder >
      <van-tabbar-item to="/homepage" icon="wap-home-o" name="1">首页</van-tabbar-item>
      <van-tabbar-item to="/special" icon="coupon-o" name="2">专题</van-tabbar-item>
      <van-tabbar-item to="/sort" icon="apps-o" name="3">分类</van-tabbar-item>
      <van-tabbar-item to="/shoppingCart" icon="cart-o" name="4">购物车</van-tabbar-item>
      <van-tabbar-item to="/my" icon="contact" name="5">我的</van-tabbar-item>
</van-tabbar>

下面的是实现路由监听

data:function(){
    return {
      //当前选中的数据，数据对应上方的name属性
      active: ''
    }
  },
  //页面渲染后调用该函数
  mounted() {
    this.handler()
  },
  //监听router的变化
  watch:{
    $route:{
      handler: function() {
        this.handler()
      },
      deep:true
    }
  },
  methods: {
    //判断当前路由并修改data中的active
    handler:function () {
      switch (this.$router.history.current.fullPath) {
        case '/homepage': this.active = '1'
          break;
        case '/special': this.active = '2'
          break;
        case '/sort': this.active = '3'
          break;
        case '/shoppingCart': this.active = '4'
          break;
        case '/my': this.active = '5'
          break;
      
        default:
          break;
      }
    }
  }