vue页面跳转并传参的八种方式
携带参数跳转新开窗口以及其他跳转页面传参的方法
目录
1、携带普通类型参数
2、携带复杂类型参数
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中可以使用标签实现跳转,跳转的路径是http://localhost:8080/t?index=id,如下:
点击跳转
只需要点击按钮就可以实现跳转,不需要写js代码,需要传递参数的话只需要/t?index=1即可,这样的话跳转的页面获取参数通过window.location.href能够获取到完整的url,然后截取参数。也可以通过下面代码获取参数
this.$route.query.index
方法二
跳转的路径是http://localhost:8080/t?index=id
接收参数:
this.$route.query.index
方法三
命名路由的方式:
跳转的路径是http://localhost:8080/t?index=id
点击跳转 注意这里的name也要和router/index.js中声明的name值一致,并且传参使用params,和name配对的是params,和path配对的是query。接收参数:
this.$route.params.index
方法四
跳转的路径是http://localhost:8080/t/id
router-link:to=“‘/test/’+1”
点击跳转
这时的路由也需要更为为下面的形式:
routes: [
{
path: ‘/t/:index’,
name: ‘Test’,
component: Test,
hidden:true
},
]
接收参数:
this.$route.params.index
方法五
上面四种方法都是在html中实现的跳转,还有另外对应的在js中实现的跳转并传参的方法,代码如下:
this.$route.query.index
方法六
this.$route.query.index
方法七
this.$route.query.index
方法八
this.$route.params.index
更多推荐
所有评论(0)