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

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第28天，点击查看活动详情

最近学校要求做个项目，在新闻列表页中向下滑动后，随别打开一个新闻，进入该新闻的详情页面，当看完后，从详情页返回到新闻列表页。而且滚动条也回到了最顶上的第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钩子：该组件缓存后调用，没有使用缓存，也就是没有被包裹的话，activated是不起作用，

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