一、前言
跳转网页的两种方式:
- 声明式导航:利用a标签跳转
<a href="" target="">文字或图片</a>
_blank表示跳到新页面打开,打开一个新窗口
_self表示当前页面打开链接
_parent表示在父集框架中打开
_top表示在整个窗口中打开
framename表示在指定的框架中打开
- 编程式导航:利用js跳转网页
this.$router.push( { path:‘/路径’, query: {参数名:值} } )
this.$router.push( { name:‘名称’, params: {参数名:值} } )
获取:this.$route.query/params.参数名
二、问题
路由运用編程式导航,一直点击同一个按钮报错
vue重复点击相同路由报错
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in v-on handler (Promise/async): “NavigationDuplicated: Avoided redundant navigation to current location: “/welcome”.”
三、解决
第一种:封装jump方法实现跳转
// minins.js文件 import Vue from "vue"; Vue.mixin({ methods: { jump(path) { if(path === this.$route.path) return return this.$router.push(path) } } })
第二种:修改原型方法
解决前语句:
this.$router.push({ path: ‘/welcome’ })
解决后语句:
this.$router.push({ path: ‘/welcome’ },onComplete => {},
onAbort => {})
意思详见Vue Router官网:https://router.vuejs.org/zh/guide/essentials/navigation.html
最后问题就解决了