目录Vue路由相对路径跳转1.append 属性2.router.resolve方法vue router动态路由点击跳转路径地址重复追加在练习写vue router动态路由时碰到的问
今天写东西遇到多层路由,路由之间跳转时需要相对路径,因此查了一下官网用到了append属性和router.resolve方法,因此列出具体的使用方法。
设置 append 属性后,则在当前 (相对) 路径前添加基路径。
类型:boolean
默认值:false
如果当前路由为 /eth ,跳到子级 /eth/block
<router-link to="block" append>
/eth =====> /eth/block
</router-link>
如果当前路由为 /eth/login ,跳到同级的/eth/block
<router-link to="../block" append>
/eth/login =====> /eth/block
</router-link>
如果当前路由为 /eth/block ,回到上级/eth
<router-link to="../" append>
/eth/block =====> /eth
</router-link>
router.resolve(location, current?, append?)
返回值:路由对象
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
}
});
}
}
点击多次时,地址栏不断增加重复。
查看代码发现是页面中相对路径最前面少了 ‘ / ';添加上就能正常显示了。
如下:
以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。
--结束END--
本文标题: vue路由相对路径跳转方式
本文链接: https://www.lsjlt.com/news/132882.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0