vue跳转同一锚点报错的问题处理方法

最新推荐文章于 2024-10-10 14:36:35 发布
原创 最新推荐文章于 2024-10-10 14:36:35 发布 · 105 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript #前端

这段代码展示了如何在VueRouter中重写原型上的push方法，以确保在调用push函数时，任何抛出的错误都能被正确捕获并处理。通过这种方式，开发者可以更好地控制路由切换时的异常情况。

重写路由push方法,将以下代码复制到路由index.js里面

const originalPush = VueRouter.prototype.push

VueRouter.prototype.push = function push(location) {

  return originalPush.call(this, location).catch(err => err)

}

fsy_csdn
关注
vue路由篇
weixin_68658847的博客
03-03 1825
vue路由篇
前端面经-Vue
qq_45723302的博客
08-31 2734
1、双向绑定原理，手撕简单源码（vue响应式原理） Vue的双向数据绑定是通过数据劫持集合发布者订阅者模式来实现的
vue使用a标签锚点跳转不同页面失效
林剑河的博客
04-20 1344
比如a页面跳去b页面的某个id为bbb的区域 a页面 <a href="bbb">跳转</> b页面 <div id="bbb">asdasdasds</div> const router = new VueRouter({ routes: [...], scrollBehavior (to, from, savedPosition) { if (to.hash) { return { selector:
vue项目配置路由
热门推荐
weixin_46421519的博客
01-21 1万+
vue项目配置路由 1.手动配置 （1）在main.js中添加 import router from './router' new Vue({ el: '#app', //在app.vue中引入 router, components: { App }, template: '<App/>' }) （2）在src路径下创建router文件夹，下router下创建index.js (3)给index.js添加内容 import Vue from 'vue' import R
vue路由的封装与使用
scclp的博客
11-30 4468
封装路由首先要明确的是业务需求，以及路由的基本原理 下面从几个点进行阐述： 1.关于路由的目录结构 router index.is routes is index.js文件里面存放的是关于路由的一些基本配置 index.js import Vue from 'vue' import VueRouter from "vue-router" import routes from '/routes' Vue.use(VueRouter) //......
vue页面加锚点跳转
sumimg的博客
03-14 999
【代码】vue页面加锚点跳转。
Vue路由与a标签链接锚点发生冲突
小破孩的博客
09-17 3526
近期在vue项目中，使用了a标签锚点定位对应内容的时候发现路由也发生了变化，此时如果去刷新页面则会出现找不到页面的情况。 如果直接使用下面的方法进行锚链接，会导致路由变成xxx，这样显然不是我们需要的 <a href="#xxx"></a> <div id="xxx"></div> 我们可以采用下面方法进行解决： <a @click.prevent="anchor('comment')">点击我跳转至comment</a>
VUe页面跳转url写绝对路径可以吗
最新发布
10-31
- 引用[3]: 解决Vue跳转到同一路由报错的问题，通过重写`push`方法。 - 引用[4]: 处理Vue路由传参页面刷新参数丢失的问题，提到`params`传参方式。 - 引用[5]: 进一步讨论Vue路由传参的三种方式以及解决参数丢失...
Vue基础6天实施笔记
weixin_44867717的博客
02-09 2080
Vue 基础课程 课程介绍 Vue基础语法 指令、过滤器、按键修饰符、生命周期、自定义指令、computed计算属性、watch监听器 axios、ES6模块化、组件、vue单文件组件、WebStorage SPA单页应用、router路由、Promise VueCLI脚手架、element-ui组件库、eslint代码规范检测等等 vue介绍 三大前端框架 Vue Vue.js (view)是一...
前端Vue框架面试题大全
青梅煮码
05-19 2660
谈一下你对 MVVM 的认识 mvvm ：Model-View-ViewModel的缩写，model数据层，数据模型，仅仅关注数据本身View视图层是用户操作界面 也可称为，当ViewModel对Model进行更新的时候，会通过数据绑定更新到view viewmodel 业务逻辑层 view需要什么数据 ViewModel要提供这个数据，view有哪些操作，...
vue路由跳转
qq_40983361的博客
08-31 263
解决重复跳转报错 constoriginalPush=Router.prototype.push Router.prototype.push=functionpush(location){ returnoriginalPush.call(this,location).catch(err=>err) } 正常跳转 routes.js {path:'/homePage',component:HomePage}, vue中 this.$router.p...
const originalPush = Router.prototype.push；
SiYuHuang_SCDN的博客
01-13 671
vue 路由相关
重写router.push方法
longtengg1的博客
08-23 828
const originalPush = Router.prototype.push Router.prototype.push = function push(location) { return originalPush.call(this, location).catch(err => err) } 重写router.push方法的目的，为push方法添加一个catch捕获，增加代码的健壮性。 ...
vue的路由重复点击报错
weixin_43453916的博客
10-10 947
在 main里面 加上 const originalPush = Router.prototype.push Router.prototype.push = function push(location) { return originalPush.call(this, location).catch(err => err) }
vue3项目路由是hash模式，使用element-plus的Anchor锚点无法正常跳转
qq_40926572的博客
10-10 1949
vue路由是hash模式，使用element-plus的Anchor锚点无法正常跳转
vue-router URL里存在锚点导致不能再次跳转的可能解决办法
HermitSun的博客
07-19 2719
有时候我们会碰到这么一个场景：我们可能希望点击页面上的某个按钮，然后就会滚动到页面的某一块上，也就是所谓的“滚动到锚点”的功能。这个其实很好实现，vue-router的官方文档里已经给出了写法： const router = new VueRouter({ routes: [...], scrollBehavior (to, from, savedPosition) { if (to.hash) { return { selector: to.hash
解决router重复push报错
i_for的博客
01-23 1119
在自定义的Router.prototype.push方法中，首先将原始的Router.prototype.push方法保存在originalPush变量中。在新定义的push方法中，调用了原始的Router.prototype.push方法，并将location参数传递给它。这样，如果在路由跳转过程中发生错误，可以处理该错误并进行相应的处理。总之，这段代码的作用是重写了Router.prototype.push方法，以便在执行路由跳转时添加自定义逻辑，并捕获并处理可能出现的错误。（内容由讯飞星火AI生成）
Uncaught (in promise) Error: Avoided redundant navigation to current location: “/index“. 解决方法
S筱潇S四维Smile
09-04 3349
在router.js中加入以下代码就可以 const originalPush = Router.prototype.push Router.prototype.push = function push(location) { return originalPush.call(this, location).catch(err => err) } 如果你的改了push还是没有生效，修改路由replace方法,阻止重复点击报错 const originalReplace = VueRou
成功解决vue2路由重复导航的错误
zrblue的博客
12-20 751
深夜了，早点碎觉了，记录一下,继续努力哦。
vue跳转同一路由页面不刷新
10-22
在Vue中，同一路由跳转不会重新执行生命周期，因此数据不会更新，无论是动态路由还是传参都不会刷新页面。这是因为路由的强缓存原因，同一路由跳转往往不会进行刷新。为了解决这个问题，可以采用两种方法：一是通过...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值