vue跳转页⾯打开新窗⼝，并携带与接收参数⽅式⽬录
1、携带普通类型参数
2、携带复杂类型参数
vue页⾯跳转并传参的⼋种⽅式
⽅法⼀
⽅法⼆
⽅法三
⽅法四
⽅法五
⽅法六
⽅法七
⽅法⼋
1、携带普通类型参数
字符串、数字等。
path：要跳转新页⾯的路由链接
query：要携带的参数
let pathInfo = this.$solve({
path:'/product_detail',
query:{
productId:'11'
vuejson转对象
}
})
window.open(pathInfo.href, '_blank');
新页⾯的参数接收：
this.productId = this.$route.query.productId
2、携带复杂类型参数
对象、数组等，通过JSON转换进⾏传递。
let pathInfo = this.$solve({
path:'/product_detail',
query:{
data:{name:'张三'}
}
})
window.open(pathInfo.href, '_blank');
新页⾯的参数接收：
console.log(this.$route.query.data)
vue页⾯跳转并传参的⼋种⽅式
我们知道，在vue中每个页⾯都需要在路由中声明，就是在router/index.js中写下⾯代码：
import Vue from 'vue'
import Router from 'vue-router'
import Test from "../components/Test";
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [
{
path: '/t',
name: 'Test',
component: Test,
hidden:true
},
]
})
实现页⾯跳转并传参有多种⽅式：
⽅法⼀
<router-link to="/t?index=1">
<button class="btn btn-default">点击跳转</button>
</router-link>
只需要点击按钮就可以实现跳转，不需要写js代码，需要传递参数的话只需要/t?index=1即可，这样的话跳转的页⾯获取参数通过window.location.href能够获取到完整的url，然后截取参数。也可以通过下⾯代码获取参数
this.$route.query.index
⽅法⼆
<router-link :to="{path:'/t',query: {index: 1}}">
<button class="btn btn-default">点击跳转</button>
</router-link>
其中需要注意，这⾥的to前⾯⼀定要加冒号，path的值要和上⾯路由定义的值⼀致，传参⽤query，⾥
⾯是参数字典。
接收参数：
this.$route.query.index
⽅法三
命名路由的⽅式：
<router-link :to="{name:'Test',params: {index: 1}}">
<button class="btn btn-default">点击跳转</button>
</router-link>
注意这⾥的name也要和router/index.js中声明的name值⼀致，并且传参使⽤params，和name配对的是params，和path配对的是query。
接收参数：
this.$route.params.index
⽅法四
<router-link:to="'/test/'+1">
<button class="btn btn-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>
export default{
methods:{
func (){
this.$router.push({path: '/t?index=1'});
}
}
}
</script>
接收参数依然使⽤
this.$route.query.index
⽅法六
<template>
<button @click = "func()">跳转</button>
</template>
<script>
export default{
methods:{
func (){
this.$router.push({path: '/t',query:{ index:'1'}});
}
}
}
</script>
接收参数依然使⽤
this.$route.query.index
⽅法七
<template>
<button @click = "func()">跳转</button>
</template>
<script>
export default{
methods:{
func (){
this.$router.push({path: '/t/index'});
}
}
}
</script>
接收参数依然使⽤
this.$route.query.index
⽅法⼋
<template>
<button @click = "func()">跳转</button>
</template>
<script>
export default{
methods:{
func (){
this.$router.push({name: 'Test',params:{ index:'1'}});
}
}
}
</script>
接收参数依然使⽤
this.$route.params.index
以上为个⼈经验，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。