vue跳转页面打开新窗口,并携带与接收参数方式
1、携带普通类型参数
字符串、数字等。
path：要跳转新页面的路由链接
query：要携带的参数
let pathInfo = this.$router.resolve({
path:'/product_detail',
query:{
productId:'11'
}
})
window.open(pathInfo.href, '_blank');新页面的参数接收：
this.productId = this.$route.query.productId
2、携带复杂类型参数
对象、数组等，通过JSON转换进行传递。
let pathInfo = 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中写下面代码：
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
},
]
})实现页面跳转并传参有多种方式：
方法一
在template中可以使用<router-link>标签实现跳转，跳转的路径是http://localhost:8080/t?index=id，如下：
<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
方法二
跳转的路径是http://localhost:8080/t?index=id
<router-link :to="{path:'/t',query: {index: 1}}">
<button class="btn btn-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}}">
<button class="btn btn-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"> <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
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue实现公共方法抽离，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要介绍了最新vue-cli 2.9.1的webpack存在问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
element表格翻页第2页从1开始编号(后端从0开始分页)
这篇文章主要介绍了element表格翻页第2页从1开始编号(后端从0开始分页)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-12-12
最近入门vue,用字节跳动的arco初始化一个项目的时候报错自己解决后没来的及截图,从别人那拷贝个网图把,是一样的报错,本文给大家分享vue 解决报错问题小结,感兴趣的朋友一起看看吧2023-09-09
v-for循环中使用require/import关键字引入本地图片的几种方式
在做项目的过程中,模版相同,可是不标题和图片不同,循环标题我们知道可以用v-for循环,可是该怎么引入本地图片呢？下面这篇文章主要给大家介绍了v-for循环中使用require/import关键字引入本地图片的几种方式,需要的朋友可以参考下2021-09-09
这篇文章主要介绍了利用vue重构有赞商城的思路以及总结整理，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
本篇文章记录仿写一个el-tooltip组件细节，从而有助于大家更好理解饿了么ui对应组件具体工作细节，本文是elementui源码学习仿写系列的又一篇文章，后续空闲了会不断更新并仿写其他组件2023-07-07
这篇文章主要介绍了Vue中使用matomo进行访问流量统计的实现,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
下面小编就为大家分享一篇解决使用vue.js路由后失效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
解决vue prop传值default属性如何使用,为何不生效的问题
这篇文章主要介绍了解决vue prop传值default属性如何使用,为何不生效的问题。具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
最新评论