vue3怎么用router路由跳转支持新窗口打开
时间: 2024-03-20 21:39:32 浏览: 119
vue-router跳转时打开新页面的两种方法
在Vue Router中,可以使用`router.push()`方法实现路由跳转,同时支持在新窗口中打开。具体实现步骤如下:
1. 在组件中引入Vue Router的实例对象:
```javascript
import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
history: createWebHistory(),
routes: [
//定义路由
]
})
export default {
name: 'MyComponent',
methods: {
//定义方法
}
}
```
2. 在`methods`中定义跳转方法,并使用`router.push()`方法实现路由跳转,并添加`target="_blank"`属性:
```javascript
import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
history: createWebHistory(),
routes: [
//定义路由
]
})
export default {
name: 'MyComponent',
methods: {
jumpToNewPage() {
router.push({
path: '/new-page',
query: {
id: 123
}
}, () => {
window.open('/new-page', '_blank')
})
}
}
}
```
在这个例子中,当`jumpToNewPage()`方法被调用时,会跳转到路径为`/new-page`的路由,并在新窗口中打开该路由所对应的页面。
需要注意的是,在使用`router.push()`方法时,需要指定第二个参数为回调函数,在回调函数中调用`window.open()`方法打开新窗口。
阅读全文