Vue Route如何实现跳转页面并在当前页面右边新开一个窗口

Vue Route默认是在当前窗口打开跳转的页面，如果需要在当前页面右边新开一个窗口，可以通过设置target属性实现。

具体步骤如下：

1. 在`<router-link>`标签中添加target="_blank"属性，例如：

<router-link :to="{path:'/example'}" target="_blank">跳转到示例页面</router-link>

2. 如果是通过编程式导航跳转页面，在`router.push()`中添加options对象，并设置target属性，例如：

this.$router.push({path:'/example', query:{}, target:'_blank'})

以上就是在Vue Route中实现跳转页面并在当前页面右边新开一个窗口的方法。

相关问题

Vue Route如何实现跳转页面新开一个窗口

要在Vue Router中实现在新窗口中打开链接，你可以在调用 `$router.push()` 时添加 `target='_blank'` 属性。这个功能需要在浏览器中进行，所以需要使用 `window.open` 方法来创建一个新的窗口。

以下是实现方式：

// 定义路由
const routes = [
  {
    path: '/new-window',
    name: 'NewWindow',
    component: NewWindow
  }
]

// 创建路由实例
const router = new VueRouter({
  routes
})

// 在组件中调用 $router.push() 时打开新窗口
this.$router.push({
  name: 'NewWindow'
}, () => {
  window.open('/new-window', '_blank')
})

在这个例子中，我们定义了一个名为 `NewWindow` 的组件，并将其映射到 `/new-window` 路径上。在调用 `$router.push()` 时，我们传递了一个回调函数作为第二个参数，并使用 `window.open` 方法在新窗口中打开了 `/new-window` 网址。

这样就可以实现在新窗口中打开链接的效果了。

vue 当前页面跳转百度页面

Vue.js 中有两种常见的页面跳转方式，一种是完全离开当前系统并跳转到新的外部页面：

方法一[^1]：

<template>
  <el-button type="text" size="small" @click="jump()">跳转</el-button>
</template>

<script>
methods: {
  jump() {
    window.open("https://www.baidu.com");
  }
}
</script>

在这个例子中，当你点击按钮时，会新开一个窗口跳转至百度首页。

另一种是在当前系统内打开一个新的路由页面，但不会离开应用：

方法二：

<template>
  <el-button type="text" size="small" @click="jump()">跳转</el-button>
</template>

<script>
methods: {
  jump() {
    let routeUrl = this.$router.resolve({ path: "/share", query: { id: 96 } });
    window.open(routeUrl.href, "_blank");
  }
}
</script>

这里使用 `$router` 对象来定义要跳转的路由路径和参数，然后通过 `window.open` 打开一个新的标签页。