欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue实现详情页返回列表页,数据不加载且页面原有位置不变

程序员文章站 2022-06-09 16:08:28
...

常见的需求:

列表页 ====>点击跳转到列表详情页面 ======> 返回列表页(希望页面不重新加载,且保留原来浏览的位置)。

1.实现页面的不重新加载

使用vue的keep-alive
<keep-alive>包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们,也就是所谓的第一次进入页面加载,返回等第二次进入页面不加载

app.vue:

	<keep-alive>
		<router-view v-if="$route.meta.keepAlive"></router-view>
	</keep-alive>
		<router-view v-if="!$route.meta.keepAlive"></router-view>

router-view表示的是引用的页面(也可以是组件我们这里指的是页面),$route.meta.keepAlive表示的是当前页面的metakeepAlive属性是否为true,只有该属性为true时,我们才采用keep-alive的形式

可以直接在router.js中设置meta
这里是简化版:

		{
            path: '/detail',
            component: detail
        },
        {
            path: '/list',
            component: list,
            // 设置meta
            meta: {
                keepAlive: true
            }
        },

返回
最好使用

this.$router.back()

2.实现页面返回原来的位置

详情页
注意beforeRouteEnter表示的是router页面进入前,所以上下文不能用this,可以说采用箭头函数+vm的形式
this.$refs.medicalListContainer表示的是滚动的盒子,你可以换成window等你要滚动的盒子
next()表示的是页面继续运行,是不可缺少的。

 // router跳转离开前,记录当前页面的位置
  beforeRouteLeave(to, from, next) {
    this.scroll = this.$refs.medicalListContainer.scrollTop;
    next()
  },
  // 页面进入前
  beforeRouteEnter(to, from, next) {
     next(vm => {
        vm.$refs.medicalListContainer.scrollTop = vm.scroll;
      })
  }

3.如果希望页面不加载数据但是列表某项内容变化

比如音乐列表,点击列表项进去详情页面,在详情页面点击播放,返回列表页,页面不刷新,保留原来的位置,但是某项的音乐符号变为播放
list页面:

div class="list-item" v-for="(item, index) in list" :key="index">
    <div class="list-item-left">
         <span   :class="{'active-text': item.id == playingId && playerStatus"
            >{{item.title | subTitle(15)}}</span>
          </div>

detail页面
我们需要存储detail页面的播放状态,和代表的list项id

  window.localStorage.setItem('audioId', this.playingId);
  window.localStorage.setItem('audioPlayStatus', this.audioPlayStatus);

如果你使用的是在app内嵌入H5的方式,而你又是在页面返回前存储的话,我们没有办法项点击H5按钮返回一样捕捉用户的点击动作,先存储在使用this.$router.back()返回,但是可以使用beforeDestroy,在页面被销毁前处理

beforeDestroy() {
  window.localStorage.setItem('audioId', this.playingId);
  window.localStorage.setItem('audioPlayStatus', this.audioPlayStatus);
  }

在list页面
拿到需要的参数,这样页面就会自然变化

// 页面进入前
  beforeRouteEnter(to, from, next) {
    // 如果页面来自详情页,返回原来的列表页位置,且动态变化播放状态
    if (from.path == '/detail') {
      next(vm => {
        vm.playingId =  window.localStorage.getItem('audioId');
        if (vm.playingId) {
          //         audioPlayStatus: 1 -- 播放  0 -- 暂停 (string 类型)
          vm.playerStatus = window.localStorage.getItem('audioPlayStatus')
        }
      })
    } else {
      next();
    }
  }

4. 处理初次加载和返回列表不刷新,却都要处理的函数

activated被 keep-alive 缓存的组件**时调用。(如果没有被keep-alive可以直接写在created中)
比如在webview(app内嵌套H5页面)内,我们在页面都要与原生交互,监听原生的反馈。

 // activated可以保证keep-alive情况下,页面不刷新,但是会运行activated方法
  activated() {
     //  监听暂停或继续播放
    window.playPause = function(status) {
      if (status == "pause") {
        this.playerStatus = 1;
      } else {
        this.playerStatus = 2;
      }
    }.bind(this);
  },