vue跳转页面打开新窗口并携带与接收参数方式是什么
vue跳转页面打开新窗口并携带与接收参数方式是什么
本篇内容介绍了“vue跳转页面打开新窗口并携带与接收参数方式是什么”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
1、携带普通类型参数
字符串、数字等。
path：要跳转新页面的路由链接
query：要携带的参数
letpathInfo=this.$router.resolve({path:'/product_detail',query:{productId:'11'}})window.open(pathInfo.href,'_blank');
新页面的参数接收：
this.productId=this.$route.query.productId
2、携带复杂类型参数
对象、数组等，通过JSON转换进行传递。
letpathInfo=this.$router.resolve({path:'/product_detail',query:{data:{name:'张三'}}})window.open(pathInfo.href,'_blank');
新页面的参数接收：
console.log(this.$route.query.data)
vue页面跳转并传参的八种方式
我们知道，在vue中每个页面都需要在路由中声明，就是在router/index.js中写下面代码：
importVuefrom'vue'importRouterfrom'vue-router'importTestfrom"../components/Test";Vue.use(Router)exportdefaultnewRouter({mode:'history',routes:[{path:'/t',name:'Test',component:Test,hidden:true},]})
实现页面跳转并传参有多种方式：
方法一
在template中可以使用<router-link>标签实现跳转，跳转的路径是http://localhost:8080/t?index=id，如下：
<router-linkto="/t?index=1"><buttonclass="btnbtn-default">点击跳转</button></router-link>
只需要点击按钮就可以实现跳转，不需要写js代码，需要传递参数的话只需要/t?index=1即可，这样的话跳转的页面获取参数通过window.location.href能够获取到完整的url,然后截取参数。也可以通过下面代码获取参数
this.$route.query.index
方法二
跳转的路径是http://localhost:8080/t?index=id
<router-link:to="{path:'/t',query:{index:1}}"><buttonclass="btnbtn-default">点击跳转</button></router-link>
其中需要注意，这里的to前面一定要加冒号，path的值要和上面路由定义的值一致，传参用query，里面是参数字典。
接收参数：
this.$route.query.index
方法三
命名路由的方式：
跳转的路径是http://localhost:8080/t?index=id
<router-link:to="{name:'Test',params:{index:1}}"><buttonclass="btnbtn-default">点击跳转</button></router-link>
注意这里的name也要和router/index.js中声明的name值一致，并且传参使用params，和name配对的是params，和path配对的是query。
接收参数：
this.$route.params.index
方法四
跳转的路径是http://localhost:8080/t/id
<router-link:to="'/test/'+1"><buttonclass="btnbtn-default">点击跳转</button></router-link>
这时的路由也需要更为为下面的形式：
routes:[{path:'/t/:index',name:'Test',component:Test,hidden:true},]
接收参数：
this.$route.params.index
方法五
上面四种方法都是在html中实现的跳转，还有另外对应的在js中实现的跳转并传参的方法，代码如下：
<template><button@click="func()">跳转</button></template><script>exportdefault{methods:{func(){this.$router.push({path:'/t?index=1'});}}}</script>
接收参数依然使用
this.$route.query.index
方法六
<template><button@click="func()">跳转</button></template><script>exportdefault{methods:{func(){this.$router.push({path:'/t',query:{index:'1'}});}}}</script>
接收参数依然使用
this.$route.query.index
方法七
<template><button@click="func()">跳转</button></template><script>exportdefault{methods:{func(){this.$router.push({path:'/t/index'});}}}</script>
接收参数依然使用
this.$route.query.index
方法八
<template><button@click="func()">跳转</button></template><script>exportdefault{methods:{func(){this.$router.push({name:'Test',params:{index:'1'}});}}}</script>
接收参数依然使用
this.$route.params.index
“vue跳转页面打开新窗口并携带与接收参数方式是什么”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注恰卡编程网网站，小编将为大家输出更多高质量的实用文章！
