vue 中新窗口打开vue页面 (this.$router.resolve)

最新推荐文章于 2024-06-13 11:09:32 发布

原创最新推荐文章于 2024-06-13 11:09:32 发布 · 591 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue #前端

js 专栏收录该内容

14 篇文章

订阅专栏

这段代码展示了如何在Vue.js应用中通过`this.$router.resolve()`方法生成一个带查询参数的新链接，并使用`window.open()`打开一个新窗口。路径指向'/info'，查询参数为'id'，值来自变量'id'。

let routeData = this.$router.resolve({
                path: '/info',
                query: {
                    'id': id
                }
            })
 window.open(routeData.href, '_blank')

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

suuntil

关注关注

0
点赞
踩
1

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue-router 在新窗口打开页面

前端知识分享喵

05-04

6347

Vue 属于单页面应用，而单页面应用中“路由”是在客户端执行的。客户端的 JavaScript 可以拦截页面的跳转请求，动态获取新的数据，然后在无需重新加载的情况下更新当前页面。这样通常可以带来更顺滑的用户体验，尤其是在更偏向“应用”的场景下，因为这类场景下用户通常会在很长的一段时间中做出多次交互。

【Vue知识点总结】this.$router.push与this.$router.replace 跳转的区别

最新发布

这是个栗子的博客

10-09

171

特性核心行为向历史记录添加新记录替换当前历史记录浏览器后退可以返回到上一页不可以返回到被替换的页面使用场景绝大多数正常的页面跳转登录后、重定向、不希望返回的中间页声明式等效// 假设当前路由是 /home// 使用 push// 地址栏变为 /about// 历史记录: [ /home, /about ]// 点击后退 -> 回到 /home// 使用 replace// 地址栏变为 /contact。

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

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

08-27

主要介绍了Vue中在新窗口打开页面及 Vue-router的使用,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下

【Vue】监控路由与路由参数, 刷新当前页面数据的几种方法

慕白Lee的博客

09-27

1万+

在这个示例中，我们在组件的`data`选项中定义了一个`monitoredParam`属性，用于存储监控的参数值。当监控的参数发生变化时，`watch`函数会被触发，将新的参数值保存到组件的`monitoredParam`属性中。在这个示例中，我们在组件的`data`选项中定义了一个`monitoredRoute`属性，用于存储监控的路由信息。当路由发生变化时，`watch`函数会被触发，将新的路由信息保存到组件的`monitoredRoute`属性中。

vue：新窗口打开页面

mosowe

03-23

485

const routeData = this.$router.resolve(`/pay-type?orderId=${item.orderId}`); window.open(routeData.href, '_blank');

vue中this.$router.resolve的使用

前端小白的博客

08-16

2256

this.$router.resolve的使用

若依前后端分离新窗口打开页面，如何使用this.$router.resolve解决

一米阳光的博客

11-21

6918

若依框架菜单打开新窗口展示页面，使用this.$router.resolve解决，详细步骤，一看就会

对vue2.0中.vue文件页面跳转之.$router.push的用法详解

10-18

这时候我们需要先获取到目标路由的完整路径，然后再用window.open打开新窗口。 ```javascript let routeData = this.$router.resolve({ path: '/reportpreview', query: { id: 'some-id' } }); window.open...

解决this.$router.push无法打开新窗口

航叔小屋

06-19

1996

let routeData = this.$router.resolve({ path: ‘/goods’, query: { id: id } }); window.open(routeData.href, ‘_blank’);

vue项目 this.$router.resolve作用

ivan5277的博客

06-13

3738

是一个强大的工具，它帮助开发者在不实际执行导航操作的前提下，根据Vue Router的配置动态生成目标路由的URL信息，适用于需要灵活控制导航流程或处理URL相关逻辑的场景。方法是一个非常有用的API，主要用于生成一个URL对象，这个对象包含了导航到指定路由所需的所有信息。比如，你可以指定路由名称、传递参数、查询字符串等，使得生成的URL能够满足复杂的导航需求。：该方法接受一个参数，通常是通往另一个路由的路径、名称或者一个描述目标位置的对象。（目标路由的信息对象）等属性的对象。（生成的URL字符串）、

【Vue】在新窗口中打开新页面

STATICHIT静砸的博客

11-16

2203

只需要在router-link中加上属性 target="_blank" 即可。vue是单页面应用，但是也可以实现在新窗口中打开新页面。

Vue中使用this.$router.resolve打开新页面

热门推荐

tmd

08-04

1万+

detail(id){ let route2 = this.$router.resolve({ name:'ourserve', //这里是跳转页面的name query:{ id:id //要传的参数 } }) window.open(route2.href,'_blank') //打开新的页面 }, ...

vue-router在新窗口打开页面

weixin_68966058的博客

09-04

1万+

需要注意的是，router-link并不支持 target="_blank"属性，所以需要tag=“xxx”属性把router-link渲染成标签。有些时候需要在点击事件或者函数中实现页面跳转到新的界面，这时候就可以通过router.resolve()来实现。设计的渐进式框架，但是有时候在项目中也会出现新窗口打开页面的情况，此时，就需要用vue-router来解决。

Vue中this.$router.resolve实现页面跳转并传参（在新窗口打开页面）

聆听

06-10

1万+

let lybl = ''; lybl = this.$router.resolve( { path: 'EnterpriseReport', query:{ ancheid: id , ancheyear: ancheyear }}) window.open(lybl.href, '_blank');

vue 如何在新窗口打开页面

F02528的博客

11-06

6354

vue路由跳转打开一个新页面/窗口(还需要传参到新页面)

vue 如何在新窗口打开页面

四月

08-25

9799

1. <router-link>标签实现新窗口打开：官方文档中说v-link指令已经被一个新的<router-link> 组件指令替代，这一部分的工作已经被 Vue 2 中的组件完成。注意：<router-link>不支持target="_blank"，如果你想打开一个新标签页，你必须用<a>标签。但事实上vue2版本的 <router-link> 是支持 target="_blank" 属性的(tag="a")，如下： ...

vue 中新窗口打开vue页面【this.$router.resolve】

ZXH0122的博客

11-19

1102

1.router.js内写跳转的新页面的路由 2.在点击跳转的事件内写 outsideLink () { let {href}= this.$router.resolve({ path: "/newLinkPage", }); window.open(href, '_blank'); } 原文链接：https://www.cnblogs.com/chr506029589/p/13577339.html 作者：橙子不是orange ...

Vue 中通过路由打开新窗口this.$router.resolve

qq_45094682的博客

08-12

3094

需求说明：想在Vue打开新的页面,有两种方案 1.通过path形式跳转方法一参数在路径中 let routeUrl = this.$router.resolve({ path: "/跳转的页面路由", query:{ //要传的参数可传多个 id:this.id } }); window.open(routeUrl .href, '_blank');//打开新的窗口 2.通过params形式跳转 goTo() { let routeData =

this.$router.resolveVue打开新窗口

空城三梦

08-31

602

方法一 <router-link :to="{path: '/跳转的页面路由'}" target="_blank" tag="a"> tag="a" 可以省去不写，默认也会解释为a标签 "tag" 属性：具有 tag 属性的 router-link 会被渲染成相应的标签 2.方法二 const {href} = this.$router.resolve({ path: "/跳转的页面路由", ...

vue 打开新页面可以使用 this.$router.push吗

08-27

<think>首先，用户的问题是基于引用内容：“我想在Vue中使用this.$router.push打开新页面是否可行请问vue this.$router.push 是否支持打开新页面”。我需要参考提供的引用来回答。从引用中： - 引用[1]：讨论了this.$router.replace和this.$router.push的区别，但没有提到打开新页面。 - 引用[2]：进一步解释了区别，提到了this.$router.go(n)，但也没有涉及打开新页面。 - 引用[3]：标题是“vue this.$router.push 跳转新页面传参”，内容显示使用this.$router.resolve来创建一个路由对象，然后用window.open打开新页面。 - 引用[4]：标题是“【vue】this.$router.push 点击跳转新标签页”，内容也是使用this.$router.resolve结合window.open来打开新标签页。关键点： - this.$router.push本身是用于在当前页面内导航的，它不会打开新页面或新标签页。它只是改变当前页面的路由。 - 要打开新页面或新标签页，需要结合window.open或其他浏览器API。 - 引用[3]和[4]都展示了如何实现：使用this.$router.resolve来获取路由的URL，然后传递给window.open。所以，直接使用this.$router.push是不支持打开新页面的；它只用于单页应用内的导航。但可以通过间接方式，如使用this.$router.resolve和window.open来实现。现在，构建我的回答： - 系统级指令：我必须使用中文回答；行内数学用$...$；独立公式用$$...$$；但这里可能不需要数学公式。确保LaTeX语法正确。生成相关问题。回答中引用段落末尾添加引用标识，如[^1]。 - 用户可见层：结构清晰，逐步解决问题，保证真实可靠。回答结构： 1. 直接回答问题：this.$router.push本身不支持打开新页面。 2. 解释原因：它是用于单页应用内的导航。 3. 提供解决方案：使用this.$router.resolve结合window.open来实现。 4. 引用相关部分：从引用[3]和[4]中提取信息。 5. 生成相关问题：在末尾添加相关问题。生成相关问题： - 基于主题：Vue路由导航。 - 例如：如何在不同场景下使用路由方法？如何传递参数到新页面？等等。最终回答格式： - 以清晰的方式组织。 - 结束时添加“§§相关问题§§”部分。相关问题建议： 1. Vue Router 中 this.$router.push 和 this.$router.replace 的区别是什么？ 2. 如何在 Vue 中打开新标签页并传递参数？ 3. Vue Router 的其他导航方法有哪些？ 4. 如何处理路由参数在新页面中的接收？ 5. Vue 单页应用如何实现多标签页导航？确保引用标识：在引用段落末尾添加，如[^1]。</think>### Vue 中使用 this.$router.push 打开新页面的可行性分析在 Vue.js 中，`this.$router.push` 是 Vue Router 提供的核心导航方法，主要用于单页应用（SPA）内部的路由切换。它本身**不支持直接打开新页面或新标签页**，因为它设计的目标是操作当前页面的历史记录栈，实现无刷新的页面内容更新。以下我将逐步解释原因、解决方案和实际实现方式，确保回答真实可靠，基于您提供的引用内容。 #### 1. **this.$router.push 的功能和限制** - **基本功能**：`this.$router.push` 用于在当前页面内导航到新路由。它会向浏览器的历史记录添加一个新条目，用户点击后退按钮时可以返回上一个页面。例如： ```javascript // 导航到 /home 路由，在当前页面更新内容 this.$router.push('/home'); ``` 这类似于 `history.pushState` API，不会导致页面完全刷新，仅更新 Vue 组件的视图[^1]。 - **不支持打开新页面**：`this.$router.push` 不会触发浏览器打开新标签页或新窗口，因为它只操作当前页面的路由历史。尝试用它打开新页面（如通过 `window.open`）会失败，因为它返回的是 Promise 对象（用于异步导航钩子），而非新窗口的引用[^1][^2]。 - **原因**：Vue Router 是专为 SPA 设计的，所有导航都在同一页面上下文中完成。打开新页面需要浏览器级别的 API（如 `window.open`），这与 `this.$router.push` 的职责分离。 #### 2. **如何实现打开新页面** 虽然 `this.$router.push` 本身无法打开新页面，但可以通过结合 Vue Router 的 `this.$router.resolve` 方法和浏览器 API 实现。步骤如下： - **使用 this.$router.resolve 获取路由 URL**：`this.$router.resolve` 能解析路由配置，生成完整的 URL（包括路径和查询参数），但不执行导航。然后，将此 URL 传递给 `window.open` 来打开新标签页。 - **示例代码**（基于引用[3][^3]和[4][^4]）： ```javascript // 定义路由参数（使用 query 传递参数，避免 params 丢失问题） const routeInfo = this.$router.resolve({ path: '/new-page', // 目标路由路径 query: { id: 123, type: 'test' } // 参数通过 query 传递 }); // 打开新标签页 window.open(routeInfo.href, '_blank'); ``` - **关键点**： - 使用 `query` 而不是 `params`：因为 `params` 是路由的一部分，在新页面中容易丢失；而 `query` 作为 URL 查询参数更稳定[^4]。 - `_blank` 参数：指定在新标签页打开。 - **为什么有效**：`this.$router.resolve` 生成一个包含完整 URL 的对象（`routeInfo.href`），`window.open` 则利用这个 URL 加载新页面。这绕过了 SPA 的限制，同时保持参数传递的可靠性。 #### 3. **注意事项和最佳实践** - **参数传递**：在新页面中，通过 `this.$route.query` 获取参数（例如 `this.$route.query.id`）。避免使用 `params`，因为它依赖路由配置，可能导致新页面加载失败[^2][^4]。 - **性能影响**：打开新页面会创建新的浏览器上下文，可能增加内存开销。适用于需要独立窗口的场景（如报表预览或外部链接），但不推荐频繁使用。 - **替代方案**：如果需要在当前应用内模拟多标签页，可以考虑使用状态管理（如 Vuex）或第三方库（如 `vue-tabs`），但这超出了 `this.$router.push` 的范围。 - **引用支持**：此方法在 Vue 社区广泛使用，引用[3][^3]和[4][^4]提供了具体实现，确保方案可靠。 #### 总结 - **直接可行性**：`this.$router.push` **不支持打开新页面**，仅用于 SPA 内部导航。 - **间接解决方案**：结合 `this.$router.resolve` 和 `window.open` 实现新页面打开，优先使用 `query` 传参。 - 如果您需要进一步优化或处理特定场景（如权限控制），请提供更多细节！