vue-router2.0跳转之router.push()的使用方法

这篇文章主要介绍vue-router2.0跳转之router.push()的使用方法,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

<强> router.push(位置)

除了使用创建一个标签来定义导航链接,我们还可以借助路由器的实例方法,通过编写代码来实现。

<强> router.push(位置)

想要导航到不同的URL,则使用路由器。推动方法。这个方法会向历史栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的URL。

当你点击& lt; router-link>时,这个方法会在内部调用,所以说,点击等同于调用router.push (…)。

声明式:& lt; router-link:=啊霸?/p>

编程式:router.push (…)

该方法的参数可以是一个字符串路径,或者一个描述地址的对象。

//字符串
　　router.push(& # 39;回家# 39;)//对象
　　美元。路由器。推动({路径:& # 39;/login& # 63; url=& # 39;+ $ route.path});//命名的路由
　　路由器。推动({name: & # 39;用户# 39;,参数:{标识:123}})//带查询参数,变成/后端/order& # 63;选择=2
　　美元。路由器。推动({路径:& # 39;/后端/订单# 39;,查询:{选择:“2“}});//设置查询参数
　　美元。http.post (& # 39; v1/user/select-stage& # 39;,{阶段:阶段})
　　不要犹豫({数据:{代码,内容}})=比;{
　　如果(代码===0){//对象
　　美元。路由器。推动({路径:& # 39;/回家# 39;});
　　}else if(代码===10){//带查询参数,变成/login& # 63;阶段=阶段
　　美元。路由器。推动({路径:& # 39;/登录# 39;,查询:{阶段:阶段}});
　　}
　　}）;//设计查询参数对象
　　让queryData=https://www.yisu.com/zixun/{};
　　如果(这一点。route.query.stage美元){
　　queryData。=这阶段。route.query.stage美元;
　　}
　　如果(这一点。route.query.url美元){
　　queryData。url=oute.query.url美元;
　　}
　　美元。路由器。推({路径:/我/配置文件,查询:queryData}); 

<强>替换

类型:布尔

默认值:false

设置取代属性的话,当点击时,会调用router.replace()而不是router.push(),于是导航后不会留下历史记录。即使点击返回按钮也不会回到这个页面。

//加上取代:真正的后,它不会向历史添加新记录,而是跟它的方法名一样,替换掉当前的历史记录。