导航：首页 > 开发技术 >

vue跳转页面打开新窗口并携带与接收参数方式是什么

发表于：2024-10-20 作者：千家信息网编辑

千家信息网最后更新 2024年10月20日，本篇内容介绍了"vue跳转页面打开新窗口并携带与接收参数方式是什么"的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能

千家信息网最后更新 2024年10月20日vue跳转页面打开新窗口并携带与接收参数方式是什么

本篇内容介绍了"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

其中需要注意，这里的to前面一定要加冒号，path的值要和上面路由定义的值一致，传参用query，里面是参数字典。

接收参数：

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

这时的路由也需要更为为下面的形式：

routes: [          {              path: '/t/:index',              name: 'Test',              component: Test,              hidden:true            },        ]

接收参数：