我要评论一、 keepalive的含义
二、场景
三、缓存组件
在app.vue里
<template>
<router-view v-slot="{component}">
<transition name="router-fade" mode="out-in">
<keep-alive>
<component :is="component"/>
</keep-alive>
</transition>
</router-view>
</template>router/index.js(ts)
{
path: '/',
name: 'home',
component: () => import('../views/scene.vue'),
meta:{
keepalive:true
}
},此时你的页面可能会有一个警告： <transition>中的组件呈现不能动画化的非元素根节点。
因为 <transition>包裹组件的原因，组件内必须只有一个跟节点。所以在组件内用个div标签包裹即可
四、保留之前滚动位置
在返回的首页里
//定义变量
const placescroll=ref()
onbeforerouteleave((to, from, next) => {
//在路由跳转之前，对当前浏览位置进行保存
placescroll.value = document.documentelement.scrolltop
next()
})
//组件激活
onactivated(() => {
if (placescroll.value != null && placescroll.value > 0) {
//组件激活后进行浏览位置的赋值
document.documentelement.scrolltop = placescroll.value
document.body.scrolltop = placescroll.value
}
})这样返回到首页时显示的就是之前的页面效果啦
此时还会出现一个问题，就是当我在首页浏览到一定位置后，点击“更多”，路由跳转到列表页面的位置和首页的位置一样。按理说我跳转一个新页面应该在顶部。此时在你跳转的页面里写一段这样的代码即可
//组件激活
onactivated(()=>{
//组件激活后把页面位置设置为0即可
document.documentelement.scrolltop = 0
document.body.scrolltop = 0
})
发表评论