Vue-Router给当前url添加参数时报错 Navigation Duplicated Avoided redundant navigation to current location

发现当动态修改当前页面的url中的query时会报错

是因为新创建的路由不能使用老路由的对象，而应该重新创建一个对象，以解决问题

报错内容

新老路由发生重复，停止跳转

解决方法

// 首先获取当前url
const q = this.$route && this.$route.query
// 通过创建新的路由的方式来添加参数
this.$router.push({ query: Object.assign({ filename: '' }, q) })

原因

查看Vue-Router的源码，发现其判断的是新老query对象是否完全一致。
而当通过直接修改$route.query去变化页面的时候，将会使得老的query对象也会跟着一起改变，于是就会被报路由重复

Vue-Router的源码中关于新老的判断

function isSameRoute (a, b, onlyPath) {if (b === START) {return a === b} else if (!b) {return false} else if (a.path && b.path) {return a.path.replace(trailingSlashRE, '') === b.path.replace(trailingSlashRE, '') && (onlyPath ||a.hash === b.hash &&isObjectEqual(a.query, b.query))} else if (a.name && b.name) {return (a.name === b.name &&(onlyPath || (a.hash === b.hash &&isObjectEqual(a.query, b.query) &&isObjectEqual(a.params, b.params))))} else {return false}
}

关于路由更新的逻辑

if (isSameRoute(route, current) &&// in the case the route map has been dynamically appended tolastRouteIndex === lastCurrentIndex &&route.matched[lastRouteIndex] === current.matched[lastCurrentIndex]) {this.ensureURL();if (route.hash) {handleScroll(this.router, current, route, false);}return abort(createNavigationDuplicatedError(current, route))}

在abort(createNavigationDuplicatedError(current, route))处弹出报错

实战实例

<script>
mounted () {const q = this.$route && this.$route.queryconst fn = q && q.filenameif (fn) {this.fileName = fnthis.component = 'Viewer'} else {this.component = 'Editor'if (q.filename === undefined) { this.$router.push({ query: Object.assign({ filename: '' }, q) }) }}}
</script>

Vue-Router给当前url添加参数时报错 Navigation Duplicated Avoided redundant navigation to current location相关推荐

四种解决Vue中重复点击相同路由控制台报错问题（ Avoided redundant navigation to current location）
vue-router 升级到3.1.x 后,重复点击导航时,控制台出现报错 ,虽然不影响功能使用,但是看的就不舒服. 报错信息 Uncaught (in promise) NavigationDupl ...
前端开发：Vue项目报错NavigationDuplicated：Avoided redundant navigation to current location：“/XXX”的解决方法
最近在Vue项目开发的过程中遇到一个问题,那就是在点击同一个路由操作的时候,控制台会报一下错误提示: Uncaught (in promise) NavigationDuplicated: Avoid ...
vue ui 创建项目，添加样式时报错，通过vue ui安装less-loader 和less 依赖后报错，百度告诉说版本太高导致
vue ui 安装依赖时,无法选择指定版本,所以,解决办法有两个,第一个用vue ui卸载安装的less-loader 和 less依赖, 第二个使用命令行卸载安装的less-loader 和 les ...
向当前url添加参数
//向当前url添加参数,没有历史记录window.history.replaceState({path: newurl}, '', newurl);function updateQueryStrin ...
php接受post值报错,php接收post参数时报错怎么办
php接收post参数时报错的解决办法:首先搜索[php.ini]中 [always_populate_raw_post_data ]:然后将前面的[;]去掉,并重启服务即可. php接收post参数 ...
Vue的router导航重复-报错：Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to curren
报错: Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: &q ...
SAP se11透明表添加字段时报错:字段级的结构更改(转换表xxxxxx)
SAP se11透明表添加字段时报错:字段级的结构更改(转换表xxxxxx) 由于忘记添加集团这个字段,后续补上爆出的错误. 查看报错信息发现目前的透明表结构和原有的透明表结构字段不一致导致的. 这个 ...
vue父组件往子组件传值时报错Property or method 选择操作人 is not defined on the instance but referenced during rende
vue父组件往子组件传值时报错Property or method "选择操作人" is not defined on the instance but referenced du ...
解决Vue报错：Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location
问题描述:重复点击导航时,控制台出现报错 ,虽然不影响功能使用,但也不能坐视不管. 解决 Vue 重复点击相同路由,出现 Uncaught (in promise) NavigationDuplica ...
Vue-Router 路由重复点击时报错 Uncaught (in promise) NavigationDuplicated:Avoided redundant navigation to curr
前言总结一下,在项目中遇到的一个小问题,使用 Vue 构件的项目里,有时候会存在重复点击路由报错的问题,Uncaught (in promise) NavigationDuplicated:Av ...

Vue-Router给当前url添加参数时报错 Navigation Duplicated Avoided redundant navigation to current location

报错内容

解决方法

原因

实战实例

Vue-Router给当前url添加参数时报错 Navigation Duplicated Avoided redundant navigation to current location相关推荐

最新文章

热门文章