在封装vant tabba的组件中添加:
onBeforeMount(()=>{
if (proxy.$route.name == "homeTop") {
proxy.active = 0;
} else if (proxy.$route.name == "car") {
proxy.active = 1;
} else{
proxy.active = 2;
}
}
)
根据去往的路由对应的名字指定active的值
完整代码:
<template>
<div>
<van-tabbar v-model="active">
<van-tabbar-item icon="home-o" to="/home/homeTop">首页</van-tabbar-item>
<van-tabbar-item icon="shopping-cart-o" badge="1" to="/car">购物车</van-tabbar-item>
<van-tabbar-item icon="friends-o">退出登陆</van-tabbar-item>
</van-tabbar>
</div>
</template>
<script lang="ts">
import {computed, defineComponent,ref,getCurrentInstance, onBeforeMount} from 'vue';
export default defineComponent({
setup(){
let {proxy}:any=getCurrentInstance();
let active=ref(0)
onBeforeMount(()=>{
if (proxy.$route.name == "homeTop") {
proxy.active = 0;
} else if (proxy.$route.name == "car") {
proxy.active = 1;
} else{
proxy.active = 2;
}
}
)
return{
active
}
}
})
</script>
<style lang="less" scoped>
</style>