vue项目中兼听‘返回’问题

项目中遇到的问题

 

1.vue+webpack移动端项目中“返回”按钮，刷新后监听不到

 

 

在app.vue入口框架模版中，给返回的a 标题绑定一个返回事件，在js中利用路由的编程式方法进行设置，

 

在a 标签的父元素上添加 v-if=‘isShow’ ，设置什么时候“返回”按钮显示，什么 时候 隐藏，在js中默认返回false（隐藏）；在watch中兼听路由的变化，设置什么时候显示，什么时候隐藏。

 

 

这时基本都好了，但是在子页面中刷新后就不显示“退出”按钮了，因为刷新后isShow默认的是false,不显示，所以这里要兼听刷新事件，但是从网上找vue兼听刷新，没有相关文章，然后想相关的会不会有，比如浏览器滚动事件，然后找到了兼容滚动事件，然后根据这个想法自己去尝试的改成加载事件，一开始写的是onload，发现不行，然后又改成load，结果可以，成功了就。

 

 

 

 

完整的代码：

 

<template>
    <div>
        <div class="myback" v-if='isShow'>
            <a  @click='goback'> &lt;返回 </a>
        </div>
</template>

 

export default{
    data(){
        return {
            isShow:false
        }
    },
    created(){
        window.addEventListener('load',this.eventListen);
    },
    methods:{
        goback(){
            this.$router.go(-1);

        },
        eventListen(){
         if(this.$route.path.toLowerCase()=='/index'||
                     this.$route.path.toLowerCase()=='/member'||
               this.$route.path.toLowerCase()=='/settings' ||
               this.$route.path.toLowerCase()=='/shopcart'
            ){
                this.isShow=false;
            }else{
                this.isShow=true;
            }
        }
    },
    watch: {
        '$route' (to, from) {
             if(to.path.toLowerCase()=='/index' ||
                     to.path.toLowerCase()=='/member' ||
                     to.path.toLowerCase()=='/settings' ||
                     to.path.toLowerCase()=='/shopcart'){
                 this.isShow=false;
             }else{
                 this.isShow=true;
             }
        }
    }
}