ts watch路由 参数变化_vue watch 监听路由变化

首页

列表页

购物车

会员中心

import store from "../../store"

import { mapState, mapActions } from "vuex"

export default{

// vue使用props动态传值给子组件里面的函数用

props:['floorTitle'],

data(){

return{

active: 0

}

},

created(){

this.changeTabActive()

},

watch:{  // 当数据发生改变的时候再赋值

// floorData 监视的对象

},

computed: {

...mapState({

items: state => store.state.shopcart.items,

totalNumber: state => store.state.shopcart.totalNumber,

totalMoney: state => store.state.shopcart.totalMoney,

itemCount: state => store.state.shopcart.itemCount

})

},

updated(){

this.changeTabActive()

},

methods:{

changeTabbar(active){

console.log(active)

switch (active) {

case 0:

//使用name跳转,因为路径有时候会改变,这样就需要改编程式导航,比较麻烦

this.$router.push({name:'Main'})

break;

case 1:

this.$router.push({name:'goodsList'})

break

case 2:

this.$router.push({name:'cart'})

break

case 3:

this.$router.push({name:'user'})

default:

break;

}

},

changeTabActive(){

this.nowPath=this.$route.path  //vue提供的方法

if(this.nowPath=="/shoppingMall"){

this.active=0

}else if(this.nowPath=="/goodsList"){

this.active=1

}else if(this.nowPath=="/cart"){

this.active=2

}else if(this.nowPath=="/user"){

this.active=3

}

}

},

watch:{

'$route': 'changeTabActive'

}

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值