都知道 移动端项目往往底部会有一个导航 ，但我们在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
}
}
}
}
大体的实现思路就是这样的
