回到顶部不能作用于子页面

[dzmjs]

问题描述

代码如上，跳转子页面的时候，图标不会消失，点击后是本页面回到顶部了，不是作用于子页面的。初步解决方案：跳到子页面后隐藏图标。

产生环境

• **使用版本：-"vue-ydui": "^1.2.6", nodejs版本：5.6.0
• **引入方式： Vue开发的方式
• **演示地址：-无

提示错误信息

1. 无错误提示，就是显示的不好，应该跳转子路由后隐藏该父页面的图标

代码区域

 <yd-infinitescroll>
一大批数据
  </yd-infinitescroll>
<yd-backtop></yd-backtop>
   <transition name="goleft">
      <router-view></router-view>
    </transition>
</template>

<script>
  import axios from 'axios';
  export default {
    data() {
      return {
        prevPath: "/index",//上一级路由
      }
   }
}
</script>

[dzmjs]

已经使用路由监听机制搞定啦。 思路如下：跳转子页面之前进行top插件状态的保存，然后设置为隐藏，从子页面返回到该页面的时候进行状态的回写。关于是否跳转到子页面和从子页面跳回，使用监听机制。 代码如下：

data () { return { myPagePath: this.$route.matched[1].path ,//本页面路由 myPageStatus:false,//不显示 } }

watch:{//监听路由 $route(to,from){ if(to.path==this.myPagePath){//子页面跳转到本页面 this.$refs.backtop.show=this.myPageStatus; }else{//从本页面跳转到子页面 var show=this.$refs.backtop.show; this.myPageStatus=show;//保存本页面的top状态 this.$refs.backtop.show=false; } } },