好资源导航 » 文章资讯 » vue跳转方式（打开新页面）及传参操作示例

vue跳转方式（打开新页面）及传参操作示例

2023-08-02 15:05:04 68

本文实例讲述了vue跳转方式（打开新页面）及传参操作。分享给大家供大家参考，具体如下：

1.router-link跳转

//直接写上跳转的地址

link跳转

//添加参数


//参数获取
id=this.$route.query.id
//新窗口打开

2.this.$router.push跳转

toDeail(e){
this.$router.push({path:"/detail",query:{id:e}})
}
//参数获取
id=this.$route.query.id
toDeail(e){
this.$router.push({name:"/detail",params:{id:e}})
}
//注意地址需写在name后面
//参数获取，params和query区别，query参数在地址栏显示，params的参数不在地址栏显示
id=this.$route.params.id

3.this.$router.replace跳转

//和push的区别，push有记录一个history，replace没有
toDeail(e){
this.$router.replace({name:'/detail',params:{id:e}})
}

4.resolve跳转

//resolve页面跳转可用新页面打开
//2.1.0版本后，使用路由对象的resolve方法解析路由，可以得到location、router、href等目标路由的信息。得到href就可以使用window.open开新窗口了（这边应用：https://segmentfault.com/q/1010000009557100下的一个回答）
toDeail(e){
constnew=this.$router.resolve({name:'/detail',params:{id:e}})
window.open(new.href,'_blank')
}

接收方怎么接收参数this.$route.query.serid和this.$route.params.setid，以下举一个接收的例子

注意接收参数时是$route不是$router

接收的参数:

希望本文所述对大家vue.js程序设计有所帮助。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

vue跳转方式（打开新页面）及传参操作示例

热门推荐

随机推荐