vue返回上一页不刷新页面的方法 / vue缓存页面

Vue 同时被 2 个专栏收录
4 篇文章 0 订阅
12 篇文章 0 订阅
问题:

vue框架下,在返回上一页的时候(this.$router.go(-1)) ,默认会让上个页面重新执行一遍生命周期(即被刷新了)。

想达到的效果:

返回上一页不刷新页面。

解决方法:

缓存上一页的页面,让其在已经存在的情况下,再次显示时不重新执行生命周期;

使用技术:keep-alive(vue的内置组件)

router路由配置router/index.js

const routes = [
 {
    path: '/pageA',
    name: 'pageA',
    component: () => import('../views/pageA.vue'),
    meta: {
      title: '我是页面A',
      keepAlive: false // 不需要缓存
    }
  },
  {
    path: '/pageB',
    name: 'pageB',
    component: () => import('../views/pageB.vue'),
    meta: {
      title: '我的页面B',
      keepAlive: true // 需要缓存
    }
  }
  ]
  const router = new VueRouter({
  routes
})

Vue.use(VueRouter)

template模板代码 (分发路由的页面):

<template>
  <div id="app">
	<!-- 缓存的页面,缓存$route.meta.keepAlive为true的组件 -->
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
      <!-- 不缓存的页面,不缓存$route.meta.keepAlive为false的组件 -->
      <router-view v-if="!$route.meta.keepAlive"></router-view>
   </div>
</template>

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

注意(增加的钩子函数):

缓存页面多出两个钩子函数,用于显示和隐藏该缓存的页面时触发

// activated是页面激活后的钩子函数,一进页面就会触发
 activated () {
  // 显示时
    console.log(1)
  },
  // deactivated 离开页面的钩子函数,一离开页面就会触发
  deactivated () {
    // 不显示时
    console.log(2)
  },
  • 2
    点赞
  • 0
    评论
  • 4
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 1024 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值