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

2024-05-01 06:27| 来源: 网络整理| 查看: 265

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

1.配置路由缓存 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文件种的 3.使用this.$router.back()返回

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

【本文地址】

公司简介

联系我们