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'
}
}
总结
以上是生活随笔为你收集整理的ts watch路由 参数变化_vue watch 监听路由变化的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇： 瑞士桁架机器人_机器人库晚报：人工智能可
- 下一篇： data中的数据如何在innerhtml