vue-router切换，组件不销毁

最新推荐文章于 2024-11-22 21:30:00 发布

原创最新推荐文章于 2024-11-22 21:30:00 发布 · 1.2w 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#vue #html #javascript #vue.js

笔记专栏收录该内容

28 篇文章

订阅专栏

本文介绍如何在Vue项目中利用keep-alive组件和router-view结合v-if判断，实现部分页面刷新，部分页面缓存的效果。通过在router.js中配置meta字段的keepAlive属性，可以精确控制哪些页面需要缓存，哪些需要重新加载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：后台管理系统，切换菜单时需要一部分页面刷新，一部分不刷新（其实就是组件销毁问题）

首先，我们需要在router-view标签外再包上一层标签keep-alive

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

这里使用v-if来判断一下，否则所有的组件都会销毁或者不销毁

其次，需要在router.js配置中添加meta字段（keepAlive字段默认值是false）

 
        {
          path:'/system', 
          component:system,
          name:'system',
          meta:{ keepAlive: true}
        },
        {
          path:'/log', 
          component:log,
          name:'log',
          meta:{ keepAlive: false}
        },