一、前言
跳转网页的两种方式:
- 声明式导航:利用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
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
文章由极客之家整理,本文链接:https://www.bmabk.com/index.php/post/48870.html