vue3的 keep-alive 使用,以及activated鉤子 和 vue-router中的 scrollBehavior的使用
阿新 • • 發佈:2022-03-19
先上程式碼
<router-view v-slot="{ Component }">
<keep-alive>
<component :key="$route.name" :is="Component" v-if="$route.meta.keepAlive" />
</keep-alive>
<component :key="$route.name" :is="Component" v-if="!$route.meta.keepAlive" />
</router-view>
const routes = [ { path: '/', redirect: '/home', }, // Home { path: '/home', name: 'Home', meta: { keepAlive: true, }, component: Home }, // Detail { path: '/detail', name: 'Detail', meta: { keepAlive: false, }, component: () => import('@/views/detail/index.vue'), }, ... ] const router = createRouter({ history: createWebHashHistory(), routes, })
vue2的keep-alive 參考
<keep-alive include="Home,Ranking">
<router-view />
</keep-alive>
vue3 使用注意點:
報錯:parentComponent.ctx.deactivate is not a function :
需要在 <component :key="$route.name" ... />
keep-alive相關的鉤子函式: activated / deactivated
https://v3.cn.vuejs.org/api/options-lifecycle-hooks.html#activated
onActivated(() => {
})
onDeactivated(() => {
})
vue3中 vue-router 的scrollBehavior變化
https://router.vuejs.org/zh/guide/advanced/scroll-behavior.html
const router = createRouter({ history: createWebHashHistory(), routes, scrollBehavior(to, from, savedPosition) { if (to.name === 'Detail') { return { x: 0, y: 0 }; } return savedPosition; } });
改為:
const router = createRouter({
history: createWebHashHistory(),
routes,
scrollBehavior(to, from, savedPosition) {
if (to.name === 'Detail') {
return { top: 0 };
}
return savedPosition;
}
});