vue3.x keep-alive不生效

2021-04-02 19:33:29 阅读：445 来源： 互联网

标签：return 跳转 alive keep vue3 router savePosition HomePage 页面

需求要在列表页点击查看详细页后返回，页面不刷新，还在那一块
网上App.vue教程都是

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

之类的，实际我的项目没有生效
按照页面f12的提示修改：
在这里插入图片描述

<router-view v-slot="{ Component }">
    <keep-alive>
      <component :is="Component" />
    </keep-alive>
  </router-view>

这样我的项目才生效
当然还有路由js的修改

{
    path: "/HomePage",
    name: "HomePage",
    component: () =>
        import("../views/HomePage.vue"),
        
    // 新增
    meta:{
      keepAlive: true, //此页面需要缓存
    },
  },

const router = createRouter({

  history: createWebHistory(process.env.BASE_URL),
  routes,

  // 新增
  scrollBehavior(to,from,savePosition){
    if(savePosition){
      //解决页面从列表页跳转到详情页返回,初始在原来位置
      return savePosition
    }else{
      //解决页面跳转后页面高度和前一个页面高度一样
      return {x:0,y:0}
    }
  }
});

页面返回采用this.$router.back();和history.go(-1);都可以，不能采用this.$router.push('/HomePage');

标签：return,跳转,alive,keep,vue3,router,savePosition,HomePage,页面
来源： https://blog.csdn.net/qq_40178497/article/details/115406321

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue3.x keep-alive不生效