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