vue-router 2.0 跳转之router.push()用法说明
router.push(location)
除了使用创建a标签来定义导航链接，我们还可以借助router的实例方法，通过编写代码来实现。
router.push(location)
想要导航到不同的URL，则使用router.push方法。这个方法会向history栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的URL。
当你点击
声明式：
编程式：router.push(...)
该方法的参数可以是一个字符串路径，或者一个描述地址的对象。
//字符串
router.push('home')
//对象
this.$router.push({path:'/login?url='+this.$route.path});
//命名的路由
router.push({name:'user',params:{userId:123}})
//带查询参数，变成/backend/order?selected=2
this.$router.push({path:'/backend/order',query:{selected:"2"}});
//设置查询参数
this.$http.post('v1/user/select-stage',{stage:stage})
.then(({data:{code,content}})=>{
if(code===0){
//对象
this.$router.push({path:'/home'});
}elseif(code===10){
//带查询参数，变成/login?stage=stage
this.$router.push({path:'/login',query:{stage:stage}});
}
});
//设计查询参数对象
letqueryData={};
if(this.$route.query.stage){
queryData.stage=this.$route.query.stage;
}
if(this.$route.query.url){
queryData.url=this.$route.query.url;
}
this.$router.push({path:'/my/profile',query:queryData});
replace
类型:boolean
默认值:false
设置replace属性的话，当点击时，会调用router.replace()而不是router.push()，于是导航后不会留下history记录。即使点击返回按钮也不会回到这个页面。
//加上replace:true后，它不会向history添加新记录，而是跟它的方法名一样——替换掉当前的history记录。
this.$router.push({path:'/home',replace:true})
//如果是声明式就是像下面这样写：
//编程式:
router.replace(...)
综合案例
this.$router.push({path:'/coach/'+this.$route.params.id,query:queryData});
补充知识：解决从登录页通过this.$router.push跳转首页后点返回健路由变而页面不变的问题
做H5项目的时候遇到一个问题，我从login登录页通过this.$router.push（{name:'home'}）路由登录成功后跳转到首页，但在ios系统下，会有一个默认返回条，点击返回键出现以下情况，路由显示的是回到登录页，而页面却还是首页。
解决思路：
开始我试着把push改为replace，但是发现并没什么卵用，还是会出现问题，所以只好用路由导航守卫去监听。
在首页加入beforeRouteLeave，监听到to.name如果是login的话就不跳转，否则就跳转，然后问题就解决了。
beforeRouteLeave(to,from,next){
if(to.name==='login'){
next(false)//不跳转
}else{
next()//跳转到另一个路由
}
}
以上这篇vue-router2.0跳转之router.push()用法说明就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。