110.vue單頁應用跳轉詳情頁返回后跳轉到列表滾動位置

使用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
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容