使用vue 緩存做,keep-alive
router中添加keepAlive.vue
{
path: "company-news",
name: "CompanyNews",
// component: () => import("src/pages/mobile/news/CompanyNews.vuenyNews.vue"),
component: () => import("pages/mobile/news/CompanyNews.vue"),
meta: {
title: "公司新聞",
keepAlive:true
},
},
詳情頁設置
beforeRouteLeave(to, form, next) {
to.meta.keepAlive = true
next()
}
初始化router得地方:
const Router = new VueRouter({
scrollBehavior: (to,form,savePosition) => {
if(savePosition){
return savePosition
}else{
return {x:0,y:0}
}
},
routes,
});
//離開之前重置滾動位置
Router.afterEach(()=>{
window.scrollTo(0,0)
})
APP.vue更新內容
<template>
<div id="q-app">
<keep-alive v-if="$route.meta && $route.meta.keepAlive">
<router-view />
</keep-alive>
<router-view v-if="$route.meta && !$route.meta.keepAlive" />
</div>
</template>
擴展 RouteMeta 接口來輸入 meta 字段:參考ts vur-router
https://router.vuejs.org/zh/guide/advanced/meta.html