脚本宝典收集整理的这篇文章主要介绍了vue路由相对路径跳转方式,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
今天写东西遇到多层路由,路由之间跳转时需要相对路径,因此查了一下官网用到了apPEnd属性和router.resolve方法,因此列出具体的使用方法。
设置 append 属性后,则在当前 (相对) 路径前添加基路径。
类型:boolean
默认值:false
如果当前路由为 /eth ,跳到子级 /eth/block
如果当前路由为 /eth/login ,跳到同级的/eth/block
如果当前路由为 /eth/block ,回到上级/eth
<router-link to="../" append> /eth/block =====> /eth </router-link>
返回值:路由对象
export default { mounted() { //获取即将跳转的路由对象 let routeObj = this.$router.resolve({ path: '../' }, this.$route, "append" ); //打印查看路由对象 console.log(routeObj); //路由跳转 this.$router.push({ path: routeObj.route.path, query: { //通过此方式传参 id: this.id } }); } }
点击多次时,地址栏不断增加重复。
查看代码发现是页面中相对路径最前面少了 ‘ / ';添加上就能正常显示了。
如下:
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本宝典。
以上是脚本宝典为你收集整理的vue路由相对路径跳转方式全部内容,希望文章能够帮你解决vue路由相对路径跳转方式所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。