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

最近学校要求做个项目，在新闻列表页中向下滑动后，随别打开一个新闻，进入该新闻的详情页面，当看完后，从详情页返回到新闻列表页。而且滚动条也回到了最顶上的第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=&quot;app&quot;>
 <keep-alive>
 <router-view v-if=&quot;$route.meta.keepAlive&quot;></router-view>
 </keep-alive>
 <router-view v-if=&quot;!$route.meta.keepAlive&quot;></router-view>
 </div>
</template>

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

keepAlive

为true

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

<template>
 <div id=&quot;news&quot; ref=&quot;listBox&quot;>
 <ul>
 <li v-for=&quot; newa in news&quot; :key=&quot;newa.id&quot;>
 <router-link :to=&quot;'/new/' +newa.id&quot;>{{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属性 用来获取改标签的滚动条