Vue Route如何实现跳转页面新开一个窗口
时间: 2024-03-11 09:50:54 浏览: 21
要在Vue Router中实现在新窗口中打开链接,你可以在调用 `$router.push()` 时添加 `target='_blank'` 属性。这个功能需要在浏览器中进行,所以需要使用 `window.open` 方法来创建一个新的窗口。
以下是实现方式:
```javascript
// 定义路由
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 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路由跳转新页面打开
在Vue中实现路由跳转并打开新页面有几种方式可以选择。一种方式是使用声明式的<router-link>标签,通过设置target="_blank"属性来实现在新窗口中打开页面。例如:<router-link target="_blank" :to="{path:'/home';query:{id:'1'}}">打开新页面</router-link> [2。另一种方式是使用编程式的$router.push或$router.go方法,但是在Vue2.0之后,这种方式不再支持打开新窗口的属性。可以使用this.$router.resolve方法来获取要跳转的页面的路由信息,然后使用window.open方法在新窗口中打开该页面。例如:listPush(i) { let routeUrl = this.$router.resolve({ path: "/zjzbxq", query: { i: JSON.stringify(i) } }); window.open(routeUrl.href, '_blank') } [2。如果只是简单的页面跳转,可以使用this.$router.resolve方法获取目标页面的href,然后使用window.open方法在新窗口中打开该页面。例如:const { href } = this.$router.resolve({ name: "router-name", query: { id: 1 } }); window.open(href, '_blank'); [3。这些方法可以根据具体的需求选择使用。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [Vue路由跳转打开一个新页面/窗口(还需要传参到新页面)](https://blog.csdn.net/m0_61676604/article/details/130962703)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *2* [vue路由跳转打开新页面的方式---kalrry](https://blog.csdn.net/weixin_45406712/article/details/125151199)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *3* [Vue路由跳转打开新窗口](https://blog.csdn.net/qq_45886144/article/details/130186782)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
[ .reference_list ]