Vue3 router keep-alive失效的问题
最近在写课设,第一次接触前端,在写到一个需要缓存的界面的时候想使用keep-alive发现不起作用
路由的结构如下,app.vue下使用<router-view></router-view>挂载组件
|app.vue
|login
|home(缓存该组件的所有子组件)
|inform
|edit
|....
其中home组件使用了<keep-alive></keep-alive>
包裹子组件,如下
<el-container style="height:92vh; width:88vw ; background-color: antiquewhite;">
<el-main>
<keep-alive>
<router-view >
</router-view>
</keep-alive>
</el-main>
</el-container>
</el-container>
我在其中一个组件inform.vue的钩子函数中输出如下
onMounted(() => {
console.log("通知加载");
})
onActivated(() => {
console.log('组件已激活(从缓存中恢复)');
});
当我在界面中切换组件,前进和后退都只会触发“通知加载”,只有在刷新页面的时候才会输出“组件已激活(从缓存中恢复)”
路由部分设置如下
const routes = [
{
path: '/',
redirect: '/home/inform',
},
{
path: "/home",
name: "/home",
component: () => import("../pages/Home.vue"),
children: [
{
path: "/home/inform",
name: "inform",
component: () => import("../pages/HomePage/Inform.vue")
},
{
path: "/home/editItem",
name: "editItem",
component: () => import("../pages/StudentMenu/SaqTable.vue")
},
{
path: "/home/approvalFirstWork",
name: "approvalFirstWork",
component: () => import("../pages/ApprovalMenu/ApprovalFirstWork.vue")
},
]
},
如果正常生效的话应该来回切换只会触发onActivated函数吧?搜了网上很多资料,看过社区的回答,设置过例如:include
,似乎也没能成功,尝试了都没能成功,求解答
改成这样试试