详细页返回列表保留原来滚动条所在位置

简介: 最近学校要求做个项目,在新闻列表页中向下滑动后,随别打开一个新闻,进入该新闻的详情页面,当看完后,从详情页返回到新闻列表页。而且滚动条也回到了最顶上的第1个新闻了。这样影响用户的体验效果。

最近学校要求做个项目,在新闻列表页中向下滑动后,随别打开一个新闻,进入该新闻的详情页面,当看完后,从详情页返回到新闻列表页。而且滚动条也回到了最顶上的第1个新闻了。这样影响用户的体验效果。

解决这个问题需要用路由守卫

第一步我们要在index.js给需要缓存的新闻列表添加meta属性用来缓存组件,代码如下:

import Vue from 'vue'
import VueRouter from 'vue-router'
import News from '../views/News'
import New from '../components/new'
Vue.use(VueRouter)
const routes = [{
    path: '/',
    component: News,
    meta: { keepAlive: true }
}, {
    path: '/new/:id',
    component: New
}]

keepAlive如果为true说明该组件需要缓存

第二步我们要在主入口文件App.vue添加keepAlive标签 代码如下:

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

通过v-if来判断,前面路由配置的$route.meta.keepAlive是否为true,为true的话则会将组件进行缓存,所以我们要在新闻列表添加keepAlive为true

第三步我们要给新闻列表news.vue添加路由守卫

<template>
  <div id="news" ref="listBox">
    <ul>
      <li v-for=" newa in news" :key="newa.id">
        <router-link :to="'/new/' +newa.id">{{newa.title}}</router-link>
      </li>
    </ul>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: 'news',
  data() {
    return {
      scroll: 0,
      news: [
        { id: 1, title: '新闻1', desc: '新闻1' },
        { id: 2, title: '新闻2', desc: '新闻2' },
        { id: 3, title: '新闻3', desc: '新闻3' },
        { id: 4, title: '新闻4', desc: '新闻4' },
        { id: 5, title: '新闻5', desc: '新闻5' },
        { id: 6, title: '新闻6', desc: '新闻6' },
        { id: 7, title: '新闻7', desc: '新闻7' },
        { id: 8, title: '新闻8', desc: '新闻8' },
        { id: 9, title: '新闻9', desc: '新闻9' },
        { id: 10, title: '新闻10', desc: '新闻10' },
        { id: 11, title: '新闻11', desc: '新闻11' },
        { id: 12, title: '新闻12', desc: '新闻12' },
        { id: 13, title: '新闻13', desc: '新闻13' },
        { id: 14, title: '新闻14', desc: '新闻14' },
        { id: 15, title: '新闻15', desc: '新闻15' }
      ]
    }
  },
  beforeRouteLeave(to, from, next) {
    console.log('激活beforeRouteLeave路由')
    // }
    this.scroll = this.$refs.listBox.scrollTop
    console.log(this.scroll)
    next()
  },
  activated() {
    console.log('激活activated钩子函数')
    this.$refs.listBox.scrollTop = this.scroll
  }
}
</script>

我们要用到beforeRouteLeave,和activated

beforeRouteLeave守卫:即将离开该组件的路由是调用,三个参数:to表示即将进入的目标路由对象,from表示当前导航正要离开的路由对象,newt是一个函数对象,next():进入管道中的下一个钩子,如果没有钩子则确认导航。

activated钩子:该组件缓存后调用,没有使用缓存,也就是没有被<keep-alive>包裹的话,activated是不起作用,

滚动条在那就在那添加ref:listBox属性 用来获取改标签的滚动条

目录
相关文章
如何设置控制台由底部展示改为右侧位置
这篇文章介绍了如何在Sublime Text编辑器中将控制台从底部展示改为右侧位置,通过使用Package Control来安装相关的插件来实现界面布局的调整。
span标签显示固定长度显示省略号,光标放上显示全部
span标签显示固定长度显示省略号,光标放上显示全部
158 0
如何获取与设置光标在input框的位置
如何获取与设置光标在input框的位置
如何获取与设置光标在input框的位置
scrollIntoView()定位元素显示导致页面上移解决方法?
scrollIntoView()定位元素显示导致页面上移解决方法?
549 0
判断页面滚动条所在位置
判断页面滚动条所在位置
28 0
元素去掉滚动条,保留滚动功能
元素去掉滚动条,保留滚动功能
109 0
记录列表滚动位置
记录列表滚动位置
|
Shell
在一个页面的多个位置同时显示不同的Toastr提示信息
在一个页面的多个位置同时显示不同的Toastr提示信息
206 0
在一个页面的多个位置同时显示不同的Toastr提示信息
|
JavaScript
使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态。点击列表的项,切换二级列表的显示或隐藏状态
使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态。点击列表的项,切换二级列表的显示或隐藏状态
431 0
使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态。点击列表的项,切换二级列表的显示或隐藏状态
|
存储 缓存 JavaScript
Vue详情返回列表页记住滚动条位置并保持
Vue详情返回列表页记住滚动条位置并保持