使用keep-alive
1、在项目的app.vue文件中添加keep-alive

<template>
  <div id="app">
    <!-- <router-view/> -->
    <!--缓存想要缓存的页面,实现后退不刷新-->
    <!--加上v-if的判断,可以自定义想要缓存的组件,自定义在router里面-->
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

2、在router文件夹下的index.js文件中,添加mate

{
   path: '/',
   name: 'index',
   component: index,
   meta: {
     keepAlive: true,
   },
},

3、在跳转的新页面中,添加beforeRouteLeave,位置与methods同级

beforeRouteLeave(to,from,next){
  to.meta.keepAlive = true
  next(0)
},
methods:{}
Logo

前往低代码交流专区

更多推荐