vue——详细页返回列表页，不刷新，保留列表页原来停留位置

最新推荐文章于 2024-09-27 15:50:02 发布

Geoff俊

最新推荐文章于 2024-09-27 15:50:02 发布

阅读量2w

点赞数 3

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_40673464/article/details/81735418

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

经常有这样的功能，从列表页上选择一项，跳到详细页，详细页看完，返回列表页。这时，列表页的组件会重新创建，也就是要重新从接口请求一次数据，并且会回到第一行，对于数据更新要求不高的业务来说，这样会浪费资源，而且体验页不好（列表一共100条，滑动到了90条了，点进去看好明细，出来，看到的是第1条，想看91条，还得滑下去）。那么怎么能返回到列表页后不刷新呢

①路由文件：

export default new Router({
  routes: [
    {
      path: '/hello',
      name: 'HelloWorld',
      component: HelloWorld,
      meta: {
        keepAlive: true // 需要缓存
      }
    },
    {
      path: '/hello2',
      name: 'HelloWorld2',
      component: HelloWorld2,
      meta: {
        keepAlive: false // 不需要缓存
      }
    }
  ],
  mode: 'history',
  scrollBehavior (to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { x: 0, y: 0 }
    }
  }
})

②app.vue中的router-view，外面套一层keep-alive

<keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

从详细页回到列表页，要用

this.$router.back()

用push()是不能保留滚动条停留位置的。

另外，滚动条停留位置，保留的似乎是<body>滚动条的位置。如果路由是在body内部一个div中滚动，body没有滚动条，不会保留这个div的滚动停留位置

vue版本在2.1.0之后，新增了include 和 exclude

以上代码可改成：

export default new Router({
  routes: [
    {
      path: '/hello',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/hello2',
      name: 'HelloWorld2',
      component: HelloWorld2
    }
  ],
  mode: 'history',
  scrollBehavior (to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { x: 0, y: 0 }
    }
  }
})


<keep-alive :include="['HelloWorld']">
    <router-view></router-view>
</keep-alive>

include，exclude的用法