app.vue
在app.vue根组件判断一下需要缓存的组件
<template>
<div id="app">
<!-- 路由的出口 -->
<keep-alive>
<router-view v-if="$route.meta.keepAlive" />
</keep-alive>
<router-view v-if="!$route.meta.keepAlive" />
</div>
</template>
router/index.js
{
path: '', // 默认子路由，只能有1个
name: 'home',
component: () => import('@/views/home'),
meta: {
keepAlive: true
}
}
views/home/components/article-list.vue
- 在文章列表页加载的时候监听元素滚动事件，记录当前浏览的滚动条的高度
- 然后在切换到缓存的组件时，在
activated钩子函数中把高度设置为保存的高度 - 给监听滚动条位置事件，通过 lodash 增加防抖
import { debounce } from 'lodash' data () { return { ... scrollTop: 0 // 记录滚动条的高度 } } // 当缓存组件被激活的时候触发 activated () { this.$refs['article-list'].scrollTop = this.scrollTop }, mounted () { // 获取文章列表容器的引用对象 const articleList = this.$refs['article-list'] articleList.onscroll = debounce(() => { // console.log(articleList.scrollTop) this.scrollTop = articleList.scrollTop }, 50) },
meta 字段（元数据）
- 直接在路由配置的时候，给每个路由添加一个自定义的 meta 对象，在 meta 对象可以设置一些状态，来进行一些操作
- 用来做登录校验最合适
3.情景：
我们给需要身份认证的路由加上meta属性 设置一个login：true
我们就可以判断$route.meta.login如果为true进行判断是否登录，否则，就强制跳转到登录页面
