vue中重复跳转当前页面,滚动条不重置
时间: 2023-05-16 20:04:41 浏览: 245
对于这个问题,你可以使用以下代码来重置滚动条:
```
this.$router.replace({ path: '/your-current-path' }).catch(err => {})
window.scrollTo(0, 0)
```
其中,`this.$router.replace` 可以用来重复跳转当前页面,`window.scrollTo` 可以用来重置滚动条。
相关问题
vue重复跳转当前页面,滚动条位置没有改变
答案:
这可能是因为你使用了相同的路由导航跳转到当前页面。你可以尝试在路由配置中添加 `beforeRouteUpdate` 钩子函数来解决这个问题,以便在导航到相同路由时执行一些操作来改变滚动条位置。以下是一个示例代码片段,你可以将其添加到你的路由配置中:
```
beforeRouteUpdate (to, from, next) {
const isSameRoute = to.path === from.path
const isFirstLoad = to.matched.some(route => route.meta.scrollToTop)
if (isSameRoute && isFirstLoad) {
Vue.nextTick(() => {
window.scrollTo(0, 0)
})
}
next()
}
```
请注意,在上面的代码片段中,我们使用了 `window.scrollTo` 方法来将滚动条位置重置为顶部。你需要根据你的需求来修改这个方法来满足你的具体需要。
vue路由跳转滚动条置顶
在Vue中,当使用前端路由切换到新的路由时,默认情况下滚动条会被重置到页面顶部,不会保持原先的滚动位置。如果你想要在路由切换时将滚动条置顶,你可以通过自定义路由切换时的滚动行为来实现。在路由配置中,可以使用scrollBehavior函数来自定义滚动行为。scrollBehavior函数接收三个参数:to(目标路由对象)、from(来源路由对象)和savedPosition(之前的滚动位置)。你可以根据这些参数来自定义滚动行为。如果你想让滚动条在路由切换时置顶,你可以在scrollBehavior函数中返回{ x: 0, y: 0 }来将滚动条位置重置为页面顶部。这样,在每次路由切换时,页面都会滚动到顶部。这就是如何在Vue中实现路由跳转时将滚动条置顶的方法。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [vue 切换路由页面时,滚动条滚动到最上面](https://blog.csdn.net/xingchen678/article/details/128723182)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [vue的路由滚动 切换路由之后滚动条在最上面](https://blog.csdn.net/m0_64415782/article/details/131938991)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]
阅读全文
相关推荐














