vue 点击路由跳转（地址重复）报错以及路由跳转滚动条未回滚到顶部问题

郝艳峰Vip

于 2020-12-08 10:55:42 发布

阅读量668

点赞数

分类专栏： vue 路由模式 vue.js

本文链接：https://blog.youkuaiyun.com/ww_5211314/article/details/110858531

版权

在Vue CLI4和Vue3.0环境下开发时遇到路由重复点击报错和页面滚动条记忆问题。通过覆盖Router.prototype.push方法避免了路由重复点击错误，同时在路由配置中设置scrollBehavior，确保每次跳转时滚动条回到顶部，从而解决了页面滚动状态保存的问题。这是一个实用的记录，便于日后查阅和应用。

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

前言

最近在用vue-cli4 , vue3.0开发项目时，遇到了路由跳转时当点击同一个路由地址时就会报错，另一个问题就是路由跳转后记住了上一次页面的滚动条的位置，未回滚到顶部。

step 一，路由跳转时当点击同一个路由地址(也就是路由地址重复)时就会报错,或者刷新报错

main.js

import Router from 'vue-router'
const routerPush = Router.prototype.push
Router.prototype.push = function push(location

最低0.47元/天解锁文章