vue基础之keep-alvie保持历史页面数据不变，切换页面后数据不变keep-alvie

1：路由配置文件设置

{

      path: '/MenuM',

      component: Layout,

      redirect: '/MenuM',

      children: [

        {

          path: 'MenuM',

          name: 'MenuM',

          component: () => import('@/views/MenuM'),

          meta: { title: '主界面', icon: 'table', keepAlive: true }

        }

      ]

    },

2.标注需要缓存的组件，用包裹

这一步需要注意了，有的是在APP.VUE改，有的要看所在组件里改哦~~，比如上面的component: Layout,

那我们需要修改的文件就不是app.vue了,需要修改对应文件才行，

要不然就会无法缓存页面数据，出现问题

src\layout\components\AppMain.vue

<template>

  <section class="app-main">

    <div class="app-main-top">

      <transition name="fade-transform" mode="out-in">

        <div>

          <keep-alive>

            <router-view v-if="$route.meta.keepAlive" :key="key"></router-view>

          </keep-alive>

          <router-view v-if="!$route.meta.keepAlive" :key="key"></router-view>

          <!-- <router-view :key="key" /> -->

        </div>

      </transition>

    </div>

  </section>

</template>

<script>

export default {

  name: 'AppMain',

  computed: {

    key() {

      return this.$route.path

    }

  }

}

</script>

<style lang="less" scoped>

.app-main {

  /*50 = navbar  */

  min-height: calc(100vh - 50px);

  width: 100%;

  position: relative;

  overflow: hidden;

  // background-image: url(~@/assets/image/bg01.jpg);

  .app-main-top {

    padding-top: 5px;

    padding-bottom: 5px;

    // background: rgba(255, 255, 255, 0.9);

    background: rgba(255, 255, 255, 1); // 修改背景

    min-height: calc(100vh - 50px);

  }

}

.fixed-header + .app-main {

  padding-top: 50px;

}

</style>

<style lang="scss">

// fix css style bug in open el-dialog

.el-popup-parent--hidden {

  .fixed-header {

    padding-right: 15px;

  }

}

</style>

在router中设置需要缓存的组件

包裹需要缓存组件

页面第一次进入，钩子的触发顺序created-> mounted-> activated，退出时触发deactivated。当再次进入（前进或者后退）时，只触发activated

可以动态控制是否缓存组件，代码如下：

beforeRouteLeave(to, from, next) {

  // 设置下一个路由的 meta

  to.meta.keepAlive = false; // 不缓存，即刷新

  next();

}

参考来源

https://www.jianshu.com/p/eeda81293826

https://zhuanlan.zhihu.com/p/48628352

巴特西

vue基础之keep-alvie保持历史页面数据不变，切换页面后数据不变keep-alvie

1：路由配置文件设置

2.标注需要缓存的组件，用包裹

这一步需要注意了，有的是在APP.VUE改，有的要看所在组件里改哦~~，比如上面的component: Layout,

最新文章

热门文章