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