【Vue】 keep_alive缓存部分页面返回不刷新

最新推荐文章于 2024-07-23 08:58:45 发布

先来个小漩涡

最新推荐文章于 2024-07-23 08:58:45 发布

阅读量486

点赞数

分类专栏：高阶文章标签：【Vue】 keep_alive缓存部分页面返回不刷新

本文链接：https://blog.csdn.net/weixin_43023873/article/details/100699497

版权

高阶专栏收录该内容

26 篇文章 0 订阅

订阅专栏

1.缓存页面使用场景（点击跳转路由到详情页面，后返回入口页希望数据保持）
2.使用keep-alive
3.首先在app.vue文件中修改

<template>
  <div id="app">
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
    <!--<router-view/>-->
  </div>
</template>

4.再修改router下面index.js文件

		{
          path: '/FullOrder',
          name: 'FullOrder',
          component: FullOrder,
          meta: {
            keepAlive: true // 需要被缓存
          }
        },
        {
          path: '/FullOrder',
          name: 'FullOrder',
          component: FullOrder,
          meta: {
            keepAlive: false// 不需要被缓存
          }
        },

5.完成，很简单，但是依据个人所需求而可以使用动态js改变KeepAlive状态