其他分享
首页 > 其他分享> > vue-router配置路由实现返回上一页,上一页页面数据留存

vue-router配置路由实现返回上一页,上一页页面数据留存

作者:互联网

vue在返回上一页的时候执行this.$router.go(-1) ,默认会让上一页重新执行一遍生命周期。

有时候我们不希望组件被重新渲染影响使用体验;或者处于性能考虑,避免多次重复渲染降低性能。而是希望组件可以缓存下来,维持当前的状态。这时候就可以用到keep-alive组件。
<keep-alive 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 <transition 相似,<keep-alive是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中。 当组件在 <keep-alive内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。 在 2.2.0 及其更高版本中,activated 和 deactivated 将会在 keep-alive 树内的所有嵌套组件中触发。 主要用于保留组件状态或避免重新渲染

应用场景

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

keep-alive的生命周期

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

配置

meta:{
keepAlive:true

}

{ path: '/user/home', name: 'userhome', component: UserHome, meta: { keepAlive: true } }, //值为true需要缓存,为false不需要缓存
        <keep-alive>
            <router-view v-if="$route.meta.keepAlive"></router-view>	//留存数据方法
        </keep-alive>
            <router-view v-if="!$route.meta.keepAlive"></router-view>	//不留存数据方法

被keep-alive包裹的动态组件(页面),在组件不活动时,会缓存它们的组件实例,而不是销毁它们。

// activated是页面激活后的钩子函数,一进页面就会触发
 activated () {
  // 显示时
    console.log(1)
  },
  // deactivated 离开页面的钩子函数,一离开页面就会触发
  deactivated () {
    // 不显示时
    console.log(2)
  },

3 更改 beforeEach钩子

这一步是为了清空无用的页面缓存。 假设现在A、B两个页面都开启的缓存:

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
}

记录页面滚动位置

keep-alive并不会记录页面的滚动位置,所以我们在跳转时需要记录当前的滚动位置,在触发activated钩子时重新定位到原有位置。 具体设计思路:

deactivated () {
 window.localStorage.setItem(this.key, JSON.stringify({
 listScrollTop: this.scrollTop
 }))
}
this.cacheData = window.localStorage.getItem(this.key) ?JSON.parse(window.localStorage.getItem(this.key)) : null
$('.sidebar-item').scrollTop(this.cacheData.listScrollTop)

标签:缓存,钩子,activated,alive,vue,一页,组件,router,页面
来源: https://blog.csdn.net/ruantianqing/article/details/112554437