vue router 跳转时打开新页面的示例方法

Vue Router 打开新页面的几种方法详解

在 Vue 项目中，我们经常需要实现页面跳转，有时需要在新窗口中打开新的页面。下面介绍两种常用的方法来实现这一功能。

方法一：使用 `` 标签实现新窗口打开

尽管官方文档提到 `` 不支持 `target="_blank"` 属性，但在 Vue 2 版本中，`` 是支持这个属性的（通过 `tag="a"`）。你可以这样使用：

```html

新页面打开home页

```

方法二：编程式导航

在某些情况下，你可能需要在单击事件或在函数中实现页面跳转。这时，你可以借助 router 的实例方法，通过编写代码来实现。在 Vue 2.0 以后，常用的 `$router.push` 和 `$router.go` 不支持在新窗口打开的属性。这时，你需要使用 `$router.resolve`，如下所示：

```javascript

seeShare() {

let routeUrl = this.$router.resolve({

path: "/share",

query: {id:96}

});

window.open(routeUrl.href, '_blank'); // 使用 window.open 在新窗口打开页面

}

```

以上就是关于 Vue Router 跳转时打开新页面的示例方法。希望这些方法能对你有所帮助。如果你在操作过程中遇到任何问题，欢迎随时向我提问。感谢大家对狼蚁SEO网站的支持和关注。如果你认为本文对你有所帮助，欢迎转载，但请务必注明出处。

在 Vue 的世界里，路由跳转是不可或缺的一部分。熟练掌握这些方法，将有助于提高你的开发效率和用户体验。还建议你深入了解 Vue Router 的其他功能，如动态路由、嵌套路由等，以更好地构建你的 Vue 应用。