[VUE]解决返回上一页后页面总是刷新问题

2021-09-27 1003点热度 0人点赞 0条评论

Vue项目中,默认的情况,如果某个页面跳转到了下一页,在下页面返回后($router.go(-1)),上一个页面总是会自动刷新(进入created方法),导致上页面的状态就没有了,这样的方式往往不是我们想要的!

问题解决

可以使用<keep-alive></keep-alive>来解决这个问题,它是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。

在 App.vue里面(组件最开始的地方),有如下代码:

<template>
  <div id="app">
      <router-view></router-view>
  </div>
</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 或者没有这个 meta 的组件 -->
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

这样,我们只要在路由的设置里,加上 meta 就可以让这个页面在跳到其他页面返回后,保持状态了:

{
    path: '/xxlist',
    name: 'MyList',
    title: '某某列表页面',
    component: () => import('@/views/MyList.vue'),
    meta: {
      keepAlive: true // 下一页返回后,不要刷新,不触发created
    }
  }

 

 

admin

这个人很懒,什么都没留下

文章评论

您需要 登录 之后才可以评论