Vue移动端底部导航：刷新保持原状态

"在Vue移动端项目中，保持底部导航在页面刷新后不变，可以使用Vant UI组件库的导航功能并结合本地存储实现。" 在移动端应用开发中，尤其是使用Vue.js框架时，通常会在底部设置一个固定的导航栏，方便用户在各个页面之间切换。然而，当页面被刷新或者通过特定链接直接进入时，底部导航栏可能会重置回默认状态，这并不符合用户体验。本示例提供了一个解决方案，确保底部导航在页面刷新后能保持在用户之前选择的位置。 Vant UI是一个流行的Vue.js组件库，它提供了丰富的UI元素，包括底部导航栏。在这个案例中，我们可以利用Vant的`change`事件来监听导航栏的变化，并配合Vue的生命周期钩子和本地存储（localStorage）来实现导航状态的持久化。 首先，我们定义一个数据属性`active`，它表示当前选中的导航项的索引，初始值设为0，对应首页。在`created`钩子函数中，我们从localStorage中尝试获取`active`的值，如果存在则设置给`active`，这样页面加载时就能恢复之前的导航状态。 ```javascript export default { data() { return { active: 0 // 默认选中首页 } }, created() { this.active = JSON.parse(localStorage.getItem('active')) // 从本地缓存中恢复 } } ``` 接下来，我们需要一个`change`方法来处理导航项的切换，并将新的`active`值保存到localStorage中： ```javascript methods: { change(active) { localStorage.setItem('active', active) // 将新的导航状态保存到本地 } } ``` 为了在路由变化时自动更新`active`，我们需要使用Vue的`$route`对象的`watch`监听器。根据路由路径，我们可以设定对应的`active`值： ```javascript 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 } } } ``` 这个解决方案的关键在于结合Vant的导航组件、Vue的生命周期钩子以及本地存储，实现了底部导航栏在页面刷新或通过链接跳转后仍能保持用户之前选择的状态。这样，无论是用户从购物车直接跳转到登录页面，还是其他情况，底部导航都能正确反映出用户所在的页面。