vue路由跳转以新页面打开参数传递

最新推荐文章于 2023-11-02 14:26:18 发布

原创最新推荐文章于 2023-11-02 14:26:18 发布 · 3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

原创分享专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍在Vue项目中如何通过GET和POST方式在不同页面间传递参数，提供了具体的代码示例，帮助开发者掌握跨页面通信技巧。

vue中打开新页面以post形式传递参数

const href = this.$router.resolve({
	name:'跳转路径',//此为Router路由配置文件中对应的name值
	params:{
		参数名:值,
		参数名:值,
		.....
	}
})
window.open(href.href, '_blank')

vue中打开新页面以get形式传递参数

const href = this.$router.resolve({
	path:'跳转路径',//此为Router路由配置文件中对应的name值  格式/path
	query:{
		参数名:值,
		参数名:值,
		.....
	}
})
window.open(href.href, '_blank')

欢迎大家访问我的个人博客：http://blog.ycsn.xyz/

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

透过代码观世界

关注关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
5
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

路由跳转到新页面并传参，name+param 和 path+query两种方式

花椒和蕊的博客

10-22

1726

第一种param传参路由表 { path: '/xxx/xxx/:id', name: 'xxx', component: () => import('@/views/xxx/xxx/xxx'), meta: { title: 'xxx详情', hidden: false, keepAlive: true, permission: ['portal'] } } 定义跳转的页面

Vue中在新窗口打开页面及Vue-router的使用

08-27

Vue 中在新窗口打开页面及 Vue-router 的使用 Vue 中在新窗口打开页面是指在...使用 Vue 中在新窗口打开页面可以满足某些特殊的需求，并且结合 Vue-router 的使用，可以更好地控制路由的跳转和解析路由对象的信息。

5 条评论您还未登录，请先登录后发表或查看评论

Vue Router 的params和query传参的使用和区别

09-28

3094

目录（一）编程式的导航 1，命名路由 2，查询参数（二）声明式的导航 1，字符串 2，命名路由 3，查询参数（三）总结首先简单来说明一下$router和$route的区别 $router : 是路由操作对象，只写对象 $route : 路由信息对象，只读对象可以理解为： this.$router 相当于一个全局的路由器对象，包含了很多属性和对象（比如 hist...

vue3 在新页签中打开页面并传参

weixin_53087128的博客

09-26

1262

【代码】vue3 在新页签中打开页面并传参。

Vue 跳转到新的标签页在新的窗口打开页面可传参

热门推荐

weixin_49098968的博客

08-01

1万+

Vue单页面实现跳转到新的标签页

简述vue路由打开一个新的窗口的方法

10-17

对于这样的需求，Vue Router提供了一种编程式导航的方式，我们可以利用其API实现打开新窗口的功能。一、Vue Router的基础知识 Vue Router允许我们定义应用中可能有的各种视图所对应的URL。使用路由对象来管理整个...

vue路由跳转传递参数的方式总结

10-15

本文将详细介绍Vue路由跳转时传递参数的三种主要方式，并分析它们的特点和适用场景。 1. 动态路由传参动态路由是一种在路由路径中包含动态段的方法，通常用于表示具有唯一标识的数据项。在路由配置文件中，我们...

Vue 路由间跳转和新开窗口的方式（query、params）

10-15

在Vue项目中，路由跳转是实现页面切换的重要功能，而新开窗口则是在新的浏览器标签页中打开链接。为了在不同的页面间传递数据，我们可以使用不同的方法，最常用的有两种方式，即query方式和params方式。接下来，我们...

vue-router跳转时打开新页面的两种方法

10-16

有时候我们遇到需求，需要在路由跳转时打开新窗口。下面，我们将详细探讨使用vue-router跳转到新页面的两种常用方法。首先，要理解vue-router提供的跳转方式，我们可以使用组件或者编程式导航。第一种方法是通过...

vue的跳转方式（打开新页面）及传参

盖世小可爱的博客

09-15

886

1. router-link跳转 // 直接写上跳转的地址 <router-link to="/detail/one"> <span class="spanfour" >link跳转</span> </router-link> // 添加参数 <router-link :to="{path:'/detail/two', query:{id:1，name:'vue'}}"> </router-link>

Vue界面跳转传递参数

m0_62990162的博客

11-02

4912

vue路由打开一个新页面

Supaopao的博客

05-06

415

let routeLink = this.$router.resolve({ path: '/recruit'， query: { id: 1, name: 'wowo', } }) window.open(routeLink.href, '_blank')

vue中跳转页面到新窗口并传参

saltlike的博客

09-27

1008

问题描述：做项目时遇到一个需求：在新窗口打开要跳转的页面；在代码实现层面表现为：使用$router.push或者$router.go在单击事件或者函数中实现页面跳转；但在vue2.0之后，它们不再支持_blank新窗口打开的属性；解决方案：使用支持_blank属性的$router.resolve handleLinkDetail(value) { // this.$router.push(`/detail/index?id=${value.id}&flag=1`);

以post方式传参方式打开新窗口

lingxyd 的专栏

04-01

8802

以post方式传参方式打开新窗口在使用winow.open打开新窗口时，因为是get方式传参，经常因为参数过长产生一些错误，考虑改用post传参来避免这一问题。要改为post传参方式需要使用一个隐藏form来提交参数，但使用form的target新建窗口又不能自定义window样式。 google了下，可以在提交form的时候使用window.open新建一个空窗口，并将form的

Vue 页面跳转params、query传参

林中明月间丶

07-31

7349

https://www.jianshu.com/p/c699c4d197devue 跳转页面并传递参数 https://blog.csdn.net/weixin_40297452/article/details/90704936 <router-link :to="'/index/'+id" tag="li"> //(id是参数) 加tag 就解析成了可以点击的li <...

Vue中在新窗口打开页面

小馒头味的博客

10-10

2980

Vue中在新窗口打开页面 //post新窗口打开 // var newWin = window.open('','','height=500,width=1250,top=100,left=100,center=yes'), var newWin = window.open('_blank'), formStr = '', formStr = '<form style="vi...

【vue】路由跳转传递参数的几种方式

芳草萋萋鹦鹉洲哦

08-11

778

1、跳转到新标签页第一种： dofunc () { let routeUrl = this.$router.resolve({ path: '/abc', query: {id : 22} }) window.open(routeUrl .href, '_blank) } 第二种： <router-link target="_blank" :to="{path:'/abc',query:{id:'22'}}">跳转到新页面</router-lin

vue 跳转页面并且传值以及在新窗口打开页面的方法

tanfei_的博客

02-13

9100

vue 跳转页面并且传值以及在新窗口打开页面的方法第一步： vue跳转页面的时候要是不带自动生成路径的话，是需要自己配置页面的路由的在这里进行配置就可以，里面会有案例自己跟着配置就好第二步：配置完成后就可以进行跳转了，代码如下：跳转页面并且是新窗口打开 //这是第一种方式 <router-link target="_blank" :to="{path:'/***',query:{...

vue路由跳转打开新窗口

最新发布

09-21

在Vue中实现路由跳转并打开新窗口，可借助`this.$router.resolve`方法生成路由的完整URL，再使用`window.open`方法在新窗口打开该URL。以下是几种不同场景下的示例代码： ### 无参数跳转 ```vue <template> <button class="btns" type="button" @click="openNewWindow">打开新窗口</button> </template> <script> export default { methods: { openNewWindow() { let routerData = this.$router.resolve({ path: '/pkgeffective' }); window.open(routerData.href, '_blank'); } } } </script> ``` ### 带查询参数跳转 ```vue <template> <button class="btns" type="button" @click="openNewWindowWithParams">带参数打开新窗口</button> </template> <script> export default { methods: { openNewWindowWithParams() { let id = '123'; const { href } = this.$router.resolve({ path: '/home/test', query: { id: id } }); window.open(href, '_blank'); } } } </script> ``` ### 结合组件内方法和事件的跳转 ```vue <template> <button class="btns" type="button" @click="showLogdialog">登录</button> </template> <script> export default { methods: { showLogdialog() { let routeUrl = this.$router.resolve({ path: '/Login', query: { companyName: 'Login' } }); window.open(routeUrl.href, '_blank'); } } } </script> ``` ### 基于表格行数据的跳转 ```vue <template> <table> <thead> <tr> <th>ID</th> <th>操作</th> </tr> </thead> <tbody> <tr v-for="row in tableData" :key="row.id"> <td>{{ row.id }}</td> <td><button @click="handleLink(row)">查看</button></td> </tr> </tbody> </table> </template> <script> export default { data() { return { tableData: [ { id: 1 }, { id: 2 }, { id: 3 } ] }; }, methods: { handleLink(row) { let link = this.$router.resolve({ path: '/user', query: { id: row.id } }); window.open(link.href, '_blank'); } } } </script> ```