详解vue-router 2.0 常用基础知识点之router.push()
除了使用
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});
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。