编程式导航路由跳转到当前路由(参数不变), 多次执行会抛出NavigationDuplicated的警告错误?
注意:编程式导航(push|replace)才会有这种情况的异常,声明式导航是没有这种问题,因为声明式导航内部已经解决这种问题。
这种异常,对于程序没有任何影响的。
为什么会出现这种现象:
由于vue-router最新版本3.5.2,引入了promise,当传递参数多次且重复,会抛出异常,因此出现上面现象,
第一种解决方案
//是给push函数,传入相应的成功的回调与失败的回调,可以捕获到当前的错误,可以解决。
this.$router.push(
{
name: "search",
// path: "/search",
params: {
keyword: this.keyword,
},
query: {
k: this.keyword.toUpperCase(),
},
},
() => {}, //在这里传入成功的回调
() => {} //在这里传入失败的回调
);
//第一种解决方案可以暂时解决当前问题,但是以后再用push|replace还是会出现类似现象,因此我们需要从‘根’治病;
第二种解决方案
//重写push和replace方法,在我们的router/index.js下
//重写push和replace方法
//先将VueRouter原型上的push和replace方法备份一份
let originPush = VueRouter.prototype.push
let originReplace = VueRouter.prototype.replace
//重写
//第一个参数,告诉原来push方法你要往哪里跳转(传递那些参数)
//第二个参数:成功的回调
//第三个参数:失败的回调
//call和apply的区别
//相同点:都可以调用函数一次,都可以改变函数的this
//不同点:传递多个参数时,call传递参数用逗号隔开,apply传递一个数组
VueRouter.prototype.push = function (location, resolve, reject) {
if (resolve && reject) {
originPush.call(this, location, resolve, reject)
} else {
originPush.call(this, location, () => { }, () => { })
}
}
VueRouter.prototype.replace = function (location, resolve, reject) {
if (resolve && reject) {
originReplace.call(this, location, resolve, reject)
} else {
originReplace.call(this, location, () => { }, () => { })
}
}
//这样就可以根治掉这个问题了
重写push和replace方法,我们需要了解
this是当前的组件实例对象,当我们在入口文件注册路由VueRouter的时候,会给组件实例添加两个属性,一个$route和$router。
$router:这个属性,属性值是VueRouter的一个实例对象,他的身上并没有push方法,push方法是VueRouter原型对象上的一个方法,它是借用的VueRouter原型上的push方法
$router是通过new VueRouter 出来的
function VueRouter(){
}
push方法是VueRouter原型对象上的一个方法
VueRouter.prototype.push = function({
//函数的this是VueRouter的一个实例对象
})
编程式导航路由跳转到当前路由(参数不变), 多次执行会抛出NavigationDuplicated的警告错误?的更多相关文章
- Vue 路由的编程式导航与history模式
编程式导航 注意:官方文档写错了 通过javascript跳转 //第一种跳转方式 // this.$router.push({ path: 'news' }) // this.$router.pus ...
- vue编程式导航,命名路由
//使用 window.location.href 的形式,叫做 编程式导航 绑定事件的形式 <template> <div class="goods-item" ...
- vue动态路由传值以及get传值及编程式导航
1.动态路由传值 1.配置路由处 { path: '/content/:id', component: Content }, // 动态路由 2.对应页面传值 <router-link :to= ...
- VueRouter爬坑第四篇-命名路由、编程式导航
VueRouter系列的文章示例编写时,项目是使用vue-cli脚手架搭建. 项目搭建的步骤和项目目录专门写了一篇文章:点击这里进行传送 后续VueRouter系列的文章的示例编写均基于该项目环境. ...
- vue路由-编程式导航
除了使用 <router-link> 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现. router.push(location, onComp ...
- vue编程式导航
vue项目中使用到了组件间传值,通过路由跳转实现从产品页进入产品详情页查看功能. 使用了this.$router.push(编程式导航) product页面中:因为只需要遮住产品列表页来显示产品详情页 ...
- [Vue 牛刀小试]:第十四章 - 编程式导航与实现组件与 Vue Router 之间的解耦
一.前言 在上一章的学习中,通过举例说明,我们了解了 Vue Router 中命名路由.命名视图的使用方法,以及如何通过 query 查询参数传参,或者是采用 param 传参的方式实现路由间的参数传 ...
- 11.vue-router编程式导航
页面导航的两种方式 声明式导航:通过点击链接实现导航的方式,叫做声明式导航 例如:普通网页中的链接或vue中的 编程式导航:通过调用JavaScrip形式的API实现导航的方式,叫做编程式导航 例如: ...
- [vue]声明式导航和编程式导航
声明式导航和编程式导航 共同点: 都能进行导航,都可以触发路由,实现组件切换 区别: 写法不一样,声明式导航是写在组件的template中,通过router-link来触发,编程式导航写在js函数中, ...
随机推荐
- 初识react中高阶组件
高阶组件并不是一个组件,而是一个函数 这个函数返回值是一个组件,并且接受一个组件做为参数:并且返回一个新组件: function HighOC(WrapComponent){ //定义一个高阶组件 , ...
- python---概述
python的主要应用领域 云计算:云计算的最火的语言,典型应用OpenStack. web开发:众多优秀的web框架,典型地有Django,众多大型网站也是python开发,比如YouTube.豆瓣 ...
- 无法连接linux虚拟机,ping不通
尝试过多种方式,动态ip静态ip来回改,完了还是不好使,ping不通,请求不到主机. 如果使用桥接模式,当前虚拟机ip设置的和本地ip一样,会导致本地网络断开. 最后的解决方式是在vmware中,点击 ...
- 在Vue3项目中使用pinia代替Vuex进行数据存储
pinia是一个vue的状态存储库,你可以使用它来存储.共享一些跨组件或者页面的数据,使用起来和vuex非常类似.pina相对Vuex来说,更好的ts支持和代码自动补全功能.本篇随笔介绍pinia的基 ...
- Docker部署Nginx启动成功,浏览器拒绝访问
今天下午部署完tomcat和mysql之后就接着部署Nginx,本以为Nginx也和之前两个一样简单,但是就因为标题这个问题,花费了我一个小时纠错. 过程复现: 解决完上一篇博客(https://ww ...
- 安卓记账本开发学习day4
在代码层面,展示出来的界面应该如下图 但是实际运行效果如下图 很明显,"其他"都没有显示出来,经过一点点排查,发现是IncomeFragment.java文件的代码存在错误 @Nu ...
- arduino 天下第一(暴论) -- 智能猫眼与 SDDC 连接器移植到 arduino 上
前言 之前看了官方玩过一个智能猫眼摄像头,我很有兴趣,但是那个 IDF 平台属实难整,我光安装都整了一天,网不好下载的包可能有问题.然后命令行操作也比较麻烦,我就想到了无敌的 arduino ,ESP ...
- Apache Doris ODBC外表之Postgresql使用指南
Apache Doris 社区 2022 年的总体规划,包括待开展或已开展.以及已完成但需要持续优化的功能.文档.社区建设等多方面,我们期待有更多的小伙伴参与进来讨论.同时也希望多多关注Doris,给 ...
- 杭电2091空心三角形Java(AC)
题目:http://acm.hdu.edu.cn/showproblem.php?pid=2091 把三角形写入二维数组里,然后输出出来 注意事项: 1.三角形后面没有空格(每一层的后面) 2.三角形 ...
- 2022 Java生态系统报告:Java 11超Java 8、Oracle在缩水、Amazon在崛起!
近日,New Relic发布了最新的2022 Java生态系统报告,这份报告可以帮助我们深入的了解Java体系的最新使用情况,下面就一起来看看2022年,Java发展的怎么样了,还是Java 8 YY ...