vue带参数跳转到详情页面,vue跳转页面的几种方法
本文主要介绍vue跳转到页面打开新窗口的方式，携带和接收参数。有很好的参考价值，希望对大家有所帮助。如有错误或不足之处，请不吝赐教。
:
目录
1.携带公共类型参数2。携带复杂的类型参数。跳转到vue页面和传递参数的八种方法。一法，二法，三法，四法，五法，六法，七法，八法。
1、携带普通类型参数
字符串、数字等。
路径：跳转到新页面的路由链接。
查询：要携带的参数
让pathInfo=this。$router.resolve({
路径：“/product_detail”，
查询：{
产品id:“11”
}
})
window.open(pathInfo.href， _ blank )；
新页面的参数接收：
this.productId=this。$route.query.productId
2、携带复杂类型参数
对象、数组等。它们是通过JSON转换传递的。
让pathInfo=this。$router.resolve({
路径：“/product_detail”，
查询：{
数据：{姓名：张三 }
}
})
window.open(pathInfo.href， _ blank )；
新页面的参数接收：
console.log(这个。$route.query.data)
vue页面跳转并传参的八种方式
我们知道，vue中的每一页都需要在route中声明，也就是在router/index.js中写以下代码：
从“vue”导入Vue
从“vue路由器”导入路由器
从导入测试./components/Test ；
Vue.use(路由器)
导出默认新路由器({
模式：“历史”，
路线：[
{
路径：“/t”，
名称：“测试”，
组件：测试，
隐藏：真
},
]
})
实现页面跳转和传递参数的方法有很多种：
方法一
可以使用router-link标签跳转到模板中，跳转的路径是http://localhost:8080/t？索引=id，如下所示：
路由器-链接到=/t？索引=1
Button class=btn btn-default 单击跳转/按钮
/路由器链接
你只需要点击按钮就可以跳转。不需要写js代码。如果需要传递参数，只需要/t？Index=1，这样跳转页面可以通过window.location.href获取完整的url，然后截取参数。参数也可以通过下面的代码获得
这个。$route.query.index
方法二
跳转的路径是http://localhost:8080/t？索引=id
router-link :to={path:/t ，查询：{index: 1}}
Button class=btn btn-default 单击跳转/按钮
/路由器链接
需要注意的是，这里的to前面必须加一个冒号，path的值要和上面路由定义的值一致。查询是用来传输和引用的，参数字典就在里面。
接收参数：
这个。$route.query.index
方法三
如何命名路线：
跳转的路径是http://localhost:8080/t？索引=id
router-link :to={name:Test ，params: {index: 1}}
Button class=btn btn-default 单击跳转/按钮
/路由器链接
注意，这里的名称也要和router/index.js中声明的名称值一致，并且以params作为引用，params和name配对，query和path配对。
接收参数：
这个。$route.params.index
方法四
跳转的路径是http://localhost:8080/t/id。
路由器链接：to=/test/ 1
Button class=btn btn-default 单击跳转/按钮
/路由器链接
此时，路由还需要采用以下形式：
路线：[
{
路径：“/t/:index”，
名称：“测试”，
组件：测试，
隐藏：真
},
]
接收参数：
这个。$route.params.index
方法五
以上四种方法都是在html中实现的跳转，还有一种对应的在js中实现的跳转和传递参数的方法。代码如下：
模板
Button @click=func()跳转/按钮
/模板
脚本
导出默认值{
方法：{
func (){
这个。$router.push({path: /t？index=1 })；
}
}
}
/脚本
仍然使用接收参数。
这个。$route.query.index
方法六
模板
Button @click=func()跳转/按钮
/模板
脚本
导出默认值{
方法：{
func (){
这个。$router.push({path: /t ，查询：{ index: 1 } })；
}
}
}
/脚本
仍然使用接收参数。
这个。$route.query.index
方法七
模板
Button @click=func()跳转/按钮
/模板
脚本
导出默认值{
方法：{
func (){
这个1000美元路由器。push({ path:/t/index })；
}
}
}
/脚本
接收参数依然使用
这个. route.query.index
方法八
模板
button @click=func()跳转/按钮
/模板
脚本
导出默认值{
方法：{
func (){
这个. router.push({name: Test ，params:{ index: 1 } })；
}
}
}
/脚本
接收参数依然使用
这个. route.params.index
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。