vue-router 中使用 keepAlive ,离开页面的时候 mounted、created 等钩子被触发?

作者站长头像
站长
· 阅读数 15
<keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
{
    path: '/',
    name: 'Home',
    component: Layout,
    redirect: '/index',
    children: [
      {
        path: 'index',
        name: 'HomeIndex',
        component: () => import('@/views'),
        meta: {
          keepAlive: true
        }
      },
      {
        path: 'goods',
        name: 'GoodsIndex',
        component: () => import('@/views/Goods')
      }
    ]
  },

当前打开首页加载完成,然后进入其它页面的时候

created、mounted 等钩子会被触发 … 后退无刷新就是离开首页会执行 mounted 等钩子 …… 因为我在钩子里实现了页面初始化,如果重复执行,这样我 keepAlive 没意义了啊…

回复
1个回答
avatar
test
2024-07-20

v-if 使得两个路由组件同时只存在一个,一个卸载,另外一个挂载,使得会触发 mountedcreated 钩子函数。利用 <keep-alive>include实现你想要的效果,将要缓存的路由组件放到 include

<keep-alive include="HomeIndex">
  <router-view></router-view>
</keep-alive>
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容