Vue 跳转页面返回时tab状态有误的解决办法

2018-08-09 admin

一、前言

最近在做新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

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-37641.html

文章标题:Vue 跳转页面返回时tab状态有误的解决办法

相关文章
vue+element-ui+slot-scope实现可编辑表格
1.咱开发拿到需求大多数是去网上找成型的组件,找不到再看原生的方法能否实现,大牛除外哈,大牛一般喜欢封装组件框架。 2.可编辑表格在后台管理系统还是比较常用的,因为比较流行框架element,iview都没有这个应用,所以考虑了两种方法,下...
2017-12-25
Android中Okhttp3实现上传多张图片同时传递参数
之前上传图片都是直接将图片转化为io流传给服务器,没有用框架传图片。 最近做项目,打算换个方法上传图片。 Android发展到现在,Okhttp显得越来越重要,所以,这次我选择用Okhttp上传图片。 Okhttp目前已经更新到Okhttp...
2017-03-17
Vue获取DOM元素样式和样式更改示例
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 ‘style’ is not definde的错误,这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: &lt;template...
2017-03-13
从2014年的发展来展望JS的未来将会如何
&lt;font face=&quot;寰�杞�闆呴粦, Arial, sans-serif &quot;&gt;2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员...
2015-11-12
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; ...
2017-03-13
ajax为什么令人惊异?ajax的优缺点
使用Ajax的最大优点,就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作,并避免了在网络上发送那些没有改变的信息。 Ajax不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。就像DHT...
2015-11-12
HTML5的5个不错的开发工具推荐
HTML5规范终于在今年正式定稿,对于从事多年HTML5开发的人员来说绝对是一个重大新闻。数字天堂董事长,DCloud CEO王安也发表了文章,从开发者和用户两个角度分析了HTML对两个人群的优势。其实,关于HTML5的开发工具,我们以往的...
2015-11-12
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
AJAX的浏览器支持
AJAX 的要点是 XMLHttpRequest 对象。 不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的。 IE 浏览器使用 ActiveXObject,而其他的浏览器使用名为 XMLHttpRequest 的 Jav...
2015-11-12
回到顶部