在CreateSendView2.vue 组件中的方法定义点击事件,vue router 跳转新的窗口通过采用如下的方法可以实现传递参数跳转相应的页面
goEditor: function (index,channel) {
//跨域的方法传递参数(参见
let routeData = this.$router.resolve({path: '/createImageText2', query: {ID: index,channel:channel}});
window.open(routeData.href, '_blank');
注:1、let routeData = this.$router.resolve({path:`/createImageText2/${ID,channel}`)这样传递不了参数需要使用上面的方法
2、_blank是表示开一个新窗口
在PreviewImageText.vue组件页面中通过created()生命函数接收CreateSendView2.vue组件传递地参数id,channel,在该组件中data中定义变量来接收
created(){
this.preImgMsgDTO.channel=this.$route.query.channel
this.preImgMsgDTO.id=this.$route.query.ID
}
query,和params的区别
1、用法
A、query要用path来引入,接收参数都是this.$route.query.name。
B、params要用name来引入,接收参数都是this.$route.params.name。
2、效果
A、query类似于ajax中get传参,即在浏览器地址栏中显示参数。
B、params则类似于post,即在浏览器地址栏中不显示参数。
3、个人建议
在路由传参上建议使用params,以隐藏参数,做好安全保密。