vue 跳转页面返回时tab状态有误的解决办法
2023-09-11 14:16:54 时间
一、前言
最近在做新vue项目的时候遇到了一个问题,就是tab间的切换没有问题,当跳转到其他页面时,且这个页面并非子路由,再用浏览器的返回按钮返回首页时,tab的active始终指向默认的第一个选项。
感觉这还是个比较常见的问题,但是在网上居然没怎么搜索到,自己摸索了一下,搞了一个解决办法出来。由于项目的骨架部分及tab并不是我写的,在此只根据原本的代码给出一个解决方案。
二、代码
1. 监听返回
想要解决这个问题,首先要监听到返回首页的事件,然后把具体的路由值传到Tabbar这个组件里。
// index.vue
<template>
<div>
<router-view></router-view>
<Tabbar :active="tabActive"></Tabbar>
</div>
</template>
<script>
import Tabbar from './../components/tabbar'
export default {
data() {
return {
tabActive: 'home/home'
}
},
components:{
Tabbar
},
beforeRouteEnter: (to, from, next) => {
next(vm => {
vm.tabActive = 'home/' + to.name;
});
},
}
</script>
这里用到了beforeRouteEnter这个路由钩子,在vue-router的官网叫做组件内的路由导航守卫。这个钩子可以监听到从其他非子路由的页面通过点击浏览器的返回按钮跳转到首页的事件,然后把这个路由to.name传递到Tabbar组件内。
2. 改变组件内状态
// Tabbar.vue
<template>
<div class='tabbar'>
<Item txt='自选' mark='home/home' :sel='selected' @change='getVal'>
<img src='../assets/images/index1.png' slot='activeImg'/>
<img src='../assets/images/index0.png' slot='normalImg'/>
</Item>
<Item txt='询价' mark='home/inquiry' :sel='selected' @change='getVal'>
<img src='../assets/images/inquiry1.png' slot='activeImg'/>
<img src='../assets/images/inquiry0.png' slot='normalImg'/>
</Item>
<Item txt='订单' mark='home/hold' :sel='selected' @change='getVal'>
<img src='../assets/images/hold1.png' slot='activeImg'/>
<img src='../assets/images/hold0.png' slot='normalImg'/>
</Item>
<Item txt='账户' mark='home/mine' :sel='selected' @change='getVal'>
<img src='../assets/images/mine1.png' slot='activeImg'/>
<img src='../assets/images/mine0.png' slot='normalImg'/>
</Item>
</div>
</template>
<script>
import Item from './item'
export default {
props: ['active'],
components: {
Item
},
data: function(){
return {
selected: 'home/home'
}
},
watch: {
'active'(newVal,oldVal) {
this.selected = newVal;
}
},
methods: {
getVal: function(val){
this.selected = val;
}
}
}
</script>
<style>
.tabbar{width: 100%; height: 2.8rem; border-top: 1px solid #ccc; position: fixed; left: 0; bottom: 0;background-color: white;}
</style>
在Tabbar组件内首先通过props接受到外部传进来的active值,再用watch监听器监听active的变化,将新值赋给selected,这样就可以完美解决这个问题了。
最后给出其中Item组件的代码:
<template>
<div class='itemWrap' @click='fn'>
<span v-show='bol'><slot name='activeImg'></slot><br/></span>
<span v-show='!bol'><slot name='normalImg'></slot><br/></span>
<span :class='{active: bol}'>{{ txt }}</span>
</div>
</template>
<script>
export default {
props: ['txt', 'mark', 'sel'],
computed: {
bol: function(){
if (this.mark == this.sel){
return true;
}
return false;
}
},
methods: {
fn: function(){
this.$emit('change',this.mark);
this.$router.push('/' + this.mark);
}
}
}
</script>
<style>
.itemWrap{width: 25%; float: left; text-align: center; font-size:0;}
.itemWrap img{width: 1.2rem;height: 1.2rem;margin-top: 0.5rem;}
.itemWrap span{font-size: 0.6rem; color: #666;}
.itemWrap .active{color: #dc4537;}
</style>
三、结语
感觉这个Tabbar写得有些复杂,但是解决此问题的办法应该是比较通用的。希望可以帮到和我遇到一样问题的人。
相关文章
- Vue笔记:vue-router
- Vue笔记:安装配置node.js及使用vue-cli创建项目
- Vue_(Router路由)-vue-router路由的基本用法
- VUE单独页面body css设置
- vue父组件调用子组件资源
- [Vue @Component] Define Props on a Vue Class with vue-property-decorator
- vue.js3: 拖动排序(vue@3.2.37 / vuedraggable@4.1.0)
- vue.js3:文本对比或比较(codemirror@5.65.5 / vue@3.2.37)
- Vue.js3: 页面打开前实现图片全部预加载(vue@3.2.33)
- vue.js3:用pinia做状态管理(vue@3.2.37 / pinia@2.0.16)
- vue.js3: 用axios访问接口(vue@3.2.37 / axios@0.27.2)
- 教你vue-router命令视图应该怎么玩
- How is syntax error in Vue detected - Vue的语法错误检查机制介绍
- vue-tour快速入门:VUE项目中如何使用vue-tour新手引导指引插件?怎样使用?包含具体实例
- vue 的 render 函数的用法:new Vue({ render: h => h(App), }).$mount(‘#app‘)
- Vue CLI 4.x安装成功,但是无法运行vue-V等指令。报错vue -V 不是内部或外部命令,也不是可运行的程序或批处理文件解决方案!!!
- vue跑马灯效果.html
- vue:export default 和 export 区别(difference between Vue 'export default' and 'new Vue')
- Vue设置全局的方法和样式
- 208:vue+openlayers 监听瓦片地图加载情况,200、403及其他状态码的处理示例
- 191:vue+openlayers 选择feature,固定按钮删除selected feature
- 152:vue+openlayers: 地图状态与 URL 同步交互,显示地图中心点、放缩级别、旋转角度等
- Vue(五)计算属性、过滤器、axios、vue 生命周期
- Vue 开发必须知道的 36 个技巧【近1W字】
- 基于Java+SpringBoot+Vue前后端分离电影院售票订票系统设计与实现(有演示视频)
- 基于Java+SpringBoot+Vue在线培训考试系统设计与实现
- Vue学习笔记——vue-router