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