vue-router 中使用 keepAlive ,离开页面的时候 mounted、created 等钩子被触发?
<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个回答

test
2024-07-20
v-if
使得两个路由组件同时只存在一个,一个卸载,另外一个挂载,使得会触发 mounted
、created
钩子函数。利用 <keep-alive>
的include
实现你想要的效果,将要缓存的路由组件放到 include
:
<keep-alive include="HomeIndex">
<router-view></router-view>
</keep-alive>
回复

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