解决Vue重复点击导航，跳转相同路由出现Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation

灰太狼 2022-09-09 11:51 167阅读 0赞

问题描述：重复点击导航时，控制台出现报错 ，虽然不影响功能使用，但也不能视而不见。

Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location:  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5be05ZWm5ZWm5ouJ57KR57KR_size_18_color_FFFFFF_t_70_g_se_x_16]

## 解决方法： ##

$router上有一个history属性记录着路径：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5be05ZWm5ZWm5ouJ57KR57KR_size_18_color_FFFFFF_t_70_g_se_x_16 1]

所以在点击跳转前，进行判断，**比较当前路径是不是跟新的路径相同**

methods: {
        
           homePage(){
        
               if(this.$router.history.current.fullPath!=='/')
                   this.$router.replace('/');
           },
           allTopics(){
        
               if(this.$router.history.current.fullPath!=='/allTopics')
                   this.$router.replace('/allTopics');
           }
       }

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5be05ZWm5ZWm5ouJ57KR57KR_size_18_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/de0924ff14d54626a2aac6cac9a188ba.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5be05ZWm5ZWm5ouJ57KR57KR_size_18_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/e342359f2a644c83ad7c9cb6358befb1.png

解决Vue重复点击导航，跳转相同路由出现Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 vue点击跳转路由

相关 vue router 报错： Uncaught (in promise) NavigationDuplicated {_name:""NavigationDuplicated"... 的解决方法

相关 vue路由解决Uncaught (in promise) Error: Avoided redundant navigation to current location: “/home/news“.

相关 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location

相关 VUE_Vue-router报错 Avoided redundant navigation to current location 解决问题，路由跳转至当前路由地址报错

相关 NavigationDuplicated: Avoided redundant navigation to current location: “/“.

相关解决Vue重复点击导航，跳转相同路由出现Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation

相关 vue-router.esm.js?fe87:2062 Uncaught (in promise) Error: Avoided redundant navigation to current loc

相关 vue项目在点击重复路由时报错(NavigationDuplicated: Avoided redundant navigation to current location)

相关 vue项目：Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location