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
- 在文章列表頁加載的時候監(jiān)聽元素滾動事件烂琴，記錄當前瀏覽的滾動條的高度
- 然后在切換到緩存的組件時，在
activated鉤子函數(shù)中把高度設置為保存的高度 - 給監(jiān)聽滾動條位置事件刻炒，通過 lodash 增加防抖
import { debounce } from 'lodash' data () { return { ... scrollTop: 0 // 記錄滾動條的高度 } } // 當緩存組件被激活的時候觸發(fā) 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 字段（元數(shù)據(jù)）
- 直接在路由配置的時候，給每個路由添加一個自定義的 meta 對象，在 meta 對象可以設置一些狀態(tài)，來進行一些操作
- 用來做登錄校驗最合適
3.情景：
我們給需要身份認證的路由加上meta屬性 設置一個login：true
我們就可以判斷$route.meta.login如果為true進行判斷是否登錄混卵，否則，就強制跳轉(zhuǎn)到登錄頁面
