vue实现返回上一页面，页面停留在原来位置，不刷新

最新推荐文章于 2025-02-18 10:17:39 发布

習慣-學習

最新推荐文章于 2025-02-18 10:17:39 发布

阅读量7.8k

点赞数 7

文章标签： js vue.js

原文链接：https://www.jianshu.com/p/f0eab1424a39

版权

vue专栏专栏收录该内容

9 篇文章

订阅专栏

在Vue.js应用中，从列表页面进入详情页面再返回时，如何避免接口重复调用和页面滚动到顶部的问题？本文介绍了通过配置路由缓存和`<router-view>`组件，结合`this.$router.back()`方法，来实现返回时保持页面状态和滚动位置，提升用户浏览体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有时候会有这种情况。从列表页面进入详情页面，然后点击返回的时候，我们的接口会重新调用，页面也会跑到顶部，这样用户体验是很不好的，每次用户都得从上往下从新翻，下面就给大家介绍如何解决这种问题

配置路由缓存

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 }
    }
  }

2.配置App.vue文件种的<router-view/>

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

3.使用this.$router.back()返回

当用户在详情页点击返回的按钮时，我们把按钮的返回事件 this.router.go(-1)换成this.router.back()，必须用这个才能生效哦

转载：https://www.jianshu.com/p/f0eab1424a39