vue路由url问号传参、新打开页面(1分钟解决)
2019-12-27 本文已影响0人
顺小星
需求一、传参
传参效果：
image.png
原页面点击跳转事件：
image.png
goDetail(){
this.$router.push({name: 'risk_detail',query:{"detailId":"123"}})
},
目标页面获取url后的属性值：
image.png
console.log("目标页面中获取",this.$route.query.detailId)
需求二、新开窗口
上述是点击带参数在当前窗口跳转，如何实现点击事件打开新窗口呢？
将$router.push改成下面的跳转方式
image.png
goDetail(){
// this.$router.push({name: 'risk_detail',query:{"detailId":"123"}})
let newWindow = this.$router.resolve({name: 'risk_detail',query:{"detailId":"123"}})
window.open(newWindow.href, '_blank');
},
需求三、直接新窗口跳转新页面，不带参数（以qq邮箱为例）
image.png
定义点击事件为【goDeatil】，直接在windows.open中填上页面地址即可
goEmail() {
window.open('https://mail.qq.com/');
},
