vue 跳转页面返回时tab状态有误的解决办法
一、前言
最近在做新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写得有些复杂,但是解决此问题的办法应该是比较通用的。希望可以帮到和我遇到一样问题的人。
来源:https://segmentfault.com/a/1190000015944921
vue 跳转页面返回时tab状态有误的解决办法的更多相关文章
- 【ASP.NET 问题】ASP.NET 网站404页面返回200,或者302的解决办法
做网站在优化网站时遇到了跳转404页面却返回 200.302状态的问题,这样的话搜索引擎会认为这个页面是一个正常的页面,但是这个页面实际是个错误页面,虽然对访问的用户而言,HTTP状态码是“404”还 ...
- 利用js对象将iframe数据缓存, 实现子页面跳转后, 返回时不丢失之前填写的数据
利用js对象将iframe数据缓存, 实现子页面跳转后, 返回时不丢失之前填写的数据 实现描述:将数据存放在js对象中, 然后放在父页面的document对象中, 在页面刷新的时候将父页面的值取出来, ...
- 返回xml过长时被nginx截断的解决办法
返回xml过长时被nginx截断的解决办法 问题描述:通过网页获取数据,数据格式为xml.当xml比较短时,可以正常获取数据.但是xml长度过长时不能正常获取数据,通过观察返回数据的源代码,发现xml ...
- JavaScript中的ParseInt("08")和“09”返回0的原因分析及解决办法
今天在程序中出现一个bugger ,调试了好久,最后才发现,原来是这个问题. 做了一个实验: alert(parseInt("01")),当这个里面的值为01====>07时 ...
- Ubuntu“无法解析或打开软件包的列表或是状态文件”的解决办法。_StarSasumi_新浪博客
Ubuntu"无法解析或打开软件包的列表或是状态文件"的解决办法. (2011-04-30 14:56:14) 转载▼ 标签: ubuntu apt 分类: Ubuntu/Linu ...
- php history.back返回后表单数据丢失的解决办法
js使用history.back返回表单数据丢失的主要原因就是使用了session_start();的原因,该函数会强制当前页面不被缓存.本文章向码农介绍php history.back返回后表单数据 ...
- 在vue中使用 layui框架中的form.render()无效解决办法
下面简单介绍在vue中使用 layui框架中的form.render()无效解决办法. 原文地址:小时刻个人技术博客 > http://small.aiweimeng.top/index.php ...
- 前台页面long类型数字被四舍五入的解决办法
转: 前台页面long类型数字被四舍五入的解决办法 2018-05-28 11:02:38 宣午刚001 阅读数 3566更多 分类专栏: java开发 版权声明:本文为博主原创文章,遵循CC 4 ...
- 爬虫爬数据时,post数据乱码解决办法
最近在写一个爬虫,目标网站是:http://zx.bjmemc.com.cn/,可能是为了防止被爬取数据,它给自身数据加了密.用谷歌自带的抓包工具也不能捕获到数据.于是下了Fiddler. F ...
随机推荐
- window.location对象 获取页面地址
window.location对象的属性: 属性 含义 值 location.protocol 协议 "http://"或"https://" location ...
- Python---进阶---logging---装饰器打印日志
#### logging - logging.debug - logging.info - logging.warning - logging.error - logging.critical --- ...
- php----等比缩放图片
<?php /** * Created by PhpStorm. * User: admin * Date: 2019/11/19 * Time: 8:54 */ $filename = 'lo ...
- [洛谷P2154] SDOI2009 虔诚的墓主人
问题描述 小W是一片新造公墓的管理人.公墓可以看成一块N×M的矩形,矩形的每个格点,要么种着一棵常青树,要么是一块还没有归属的墓地. 当地的居民都是非常虔诚的基督徒,他们愿意提前为自己找一块合适墓地. ...
- 微信小程序细节部分
微信小程序和HTML区别: 1.开发工具不同,H5的开发工具+浏览器Device Mode预览,小程序的开发基于自己的开发者工具 2.开发语言不同,小程序自己开发了一套WXML标签语言和WXSS样式语 ...
- Java——动态绑定和多态
动态绑定是在执行期间(而不是编译期间)判断所用对象的实际类型,根据其实际的类型调用其相应的方法(确定选择哪个多态形式被调用). 首先是方法的参数是父类对象,传入子类对象是否可行 然后引出Parent ...
- 【PowerOJ1756&网络流24题】最长k可重区间集问题(费用流)
题意: 思路: [问题分析] 最大权不相交路径问题,可以用最大费用最大流解决. [建模方法] 方法1 按左端点排序所有区间,把每个区间拆分看做两个顶点<i.a><i.b>,建立 ...
- 730KII 打印机 Win7 2017年11月更新系统补丁后无法打印
卸载11月份编号为KB4048960的系统更新
- 170830-关于JdbcTemplate的练习题以及其中的问题
实验1:测试数据源 在spring文件中配置: 测试数据源: 结果: 实验2:将emp_id=5的记录的salary字段更新为1300.00[更新操作] update函数中,第一个是sql语句,后面的 ...
- org.xml.sax.SAXParseException: 元素类型 "input" 必须由匹配的结束标记 "</input>" 终止。
错误记录 Spring Boot推荐使用thymeleaf作为视图,按照SpringBoot实战一书的案例写Demo. 发生错误: org.xml.sax.SAXParseException: 元素类 ...