keep-alive处理页面回显问题以及如何回显页面上次浏览高度的问题

应用场景

  • 如果未使用keep-alive组件,则在页面回退时仍然会重新渲染页面,触发created钩子,使用体验不好。 在以下场景中使用keep-alive组件会显著提高用户体验,菜单存在多级关系,多见于列表页+详情页的场景如:

  • 商品列表页点击商品跳转到商品详情,返回后仍显示原有信息

  • 订单列表跳转到订单详情,返回,等等场景。

keep-alive的生命周期

初次进入时:created > mounted > activated;退出后触发 deactivated
再次进入:会触发 activated;事件挂载的方法等,只执行一次的放在 mounted 中;组件每次进去执行的方法放在 activated 中

  • app.vue
<div id="app" class='wrapper'>
    <keep-alive>
        <!-- 需要缓存的视图组件 --> 
        <router-view v-if="$route.meta.keepAlive"></router-view>
     </keep-alive>
      <!-- 不需要缓存的视图组件 -->
     <router-view v-if="!$route.meta.keepAlive"></router-view>
</div>
  • router中
{
  path: 'list',
  name: 'itemList', // 商品管理
  component (resolve) {
    require(['@/pages/item/list'], resolve)
 },
 meta: {
  keepAlive: true,
  title: '商品管理'
 }
}

在进入过A页面后进入B页面,经过测试后发现,B页面竟然会显示A页面的缓存,尽管url已经改变

  • 解决方法 ,beforeEach
let toDepth = to.path.split('/').length
let fromDepth = from.path.split('/').length
if (toDepth < fromDepth) {
 // console.log('back...')
 from.meta.keepAlive = false
 to.meta.keepAlive = true
}

记录页面滚动位置

  • 在deactivated钩子中记录当前滚动位置,使用localStorage:
deactivated () {
 window.localStorage.setItem(this.key, JSON.stringify({
 listScrollTop: this.scrollTop
 }))
}
  • 在activated钩子中滚动:
this.cacheData = window.localStorage.getItem(this.key) ?JSON.parse(window.localStorage.getItem(this.key)) : null
$('.sidebar-item').scrollTop(this.cacheData.listScrollTop)

可以的大家点点关注-总结不易谢谢大家-也可以留言需要哪类的我也可以尝试

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,针对您的问题,我可以提供以下的解决方案: 1. 首先,在 Vue3 工程中安装 ant-design-vue: ```bash npm install ant-design-vue@next ``` 2. 在 main.js 中引入 ant-design-vue 的样式和脚本: ```js import { createApp } from 'vue' import App from './App.vue' import Antd from 'ant-design-vue' import 'ant-design-vue/dist/antd.css' createApp(App).use(Antd).mount('#app') ``` 3. 在组件中使用 a-date-picker 组件,并将选中的日期保存在一个变量中: ```html <template> <a-date-picker v-model:value="selectedDate" style="width: 100%;" /> </template> <script> export default { data() { return { selectedDate: null, // 初始化选中的日期为 null }; }, mounted() { // 获取要回显的日期,假设为 "2022-01-01" const date = new Date("2022-01-01"); // 将选中的日期设置为获取的日期 this.selectedDate = date; }, }; </script> ``` 4. 如果您需要在页面回显已经选中的日期,可以在组件初始化时将选中的日期传入组件: ```html <template> <a-date-picker v-model:value="selectedDate" style="width: 100%;" /> </template> <script> export default { data() { return { selectedDate: null, // 初始化选中的日期为 null }; }, mounted() { // 获取要回显的日期,假设为 "2022-01-01" const date = new Date("2022-01-01"); // 将选中的日期设置为获取的日期 this.selectedDate = date; }, }; </script> ``` 希望以上解决方案能够帮助到您,如有任何疑问,请随时追问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值