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

作者：小恺

2022 年 7 月 05 日
本文字数：1444 字
阅读完需：约 5 分钟

最近学校要求做个项目，在新闻列表页中向下滑动后，随别打开一个新闻，进入该新闻的详情页面，当看完后，从详情页返回到新闻列表页。而且滚动条也回到了最顶上的第 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 属性用来获取改标签的滚动条

发布于: 刚刚阅读数: 3

小恺

关注

还未添加个人签名 2021.02.22 加入

还未添加个人简介

发布

暂无评论

创作场景

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

小恺

评论