vue路由跳转的三种方式及区别,vuerouter路由跳转
本文主要介绍vue路由的相对路径跳跃方式，具有很好的参考价值。希望对你有帮助。如有错误或不足之处，请不吝赐教。
目录
vue路由相对路径跳转1 .追加属性2.router.resolve方法vue路由器动态路由点击跳转路径地址反复追加练习写vue路由器动态路由遇到的问题
vue路由相对路径跳转
今天写东西，有多条路线，路线之间跳转需要相对路径。所以我们查了一下官网使用了append属性和router.resolve方法，所以列出了具体的使用方法。
1.append 属性
设置append属性后，基本路径被添加到当前(相对)路径之前。
类型：布尔型
默认值：false
例如，我们从/eth(基本路径)导航到相对路径/eth/block，/eth—/eth/block，路由设置为block。
如果添加了append属性，则完整路径为/eth/block，
否则，完整路径是/block。
如果当前路由是/eth，跳转到child /eth/block。
路由器-链接到=block 附加
/eth======eth/block
/路由器链接
如果当前路由是/eth/login，跳转到同级的/eth/block。
路由器-链接到=./block 追加
/eth/log in======eth/block
/路由器链接
如果当前路由是/eth/block，则返回到上级/eth
路由器-链接到=./追加
/eth/block=====/eth
/路由器链接
2.router.resolve方法
router.resolve(位置，当前？追加？)
返回值：路由对象
解析目标位置(采用与路由器链接属性相同的格式)。
当前是当前的默认路由(通常不需要更改)
Append允许您将路径(如router-link)附加到当前路由。
导出默认值{
已安装(){
//获取将要跳转的route对象
让routeObj=this。$router.resolve({
路径： ./
},
这个。$route，
附加
);
//打印以查看路由对象
console . log(route obj)；
//路由跳转
这个。$router.push({
路径：routeObj.route.path，
查询：{//以这种方式传递参数
id: this.id
}
});
}
}
vue router动态路由点击跳转路径地址重复追加
在练习写vue router动态路由时碰到的问题
当您多次单击时，地址栏会不断重复。
看了一下代码，发现页面中相对路径的前面少了/；添加后就能正常显示了。
如下所示：
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。