vue实现路由新开页跳转
时间: 2023-08-09 14:08:34 浏览: 61
要在Vue中实现路由新开页跳转,你可以使用`<router-link>`组件或者编程式导航。
1. 使用`<router-link>`组件:
在你的Vue模板中,使用`<router-link>`标签来创建一个链接,将`target="_blank"`属性添加到该标签中,以实现新开页跳转。
```html
<router-link to="/your-route" target="_blank">跳转到新页</router-link>
```
2. 使用编程式导航:
在Vue的方法中,使用`this.$router.push`方法来进行编程式导航,并在路由对象的`target`参数中指定`"_blank"`。
```javascript
// 在Vue组件的方法中
this.$router.push({ path: '/your-route', target: '_blank' });
```
然后,在你的路由配置文件中,配置一个新的路由,指向目标页面。
```javascript
// 在路由配置文件中
{
path: '/your-route',
component: YourComponent, // 目标页面组件
meta: { target: '_blank' }
}
```
通过以上两种方式之一,你可以在Vue中实现路由新开页跳转。记住,在使用`target="_blank"`时,请确保你的浏览器设置允许新开标签页。
相关问题
vue路由新开页签跳转路由
在Vue中,可以使用两种方式实现路由新开页签跳转。一种是使用JS实现,另一种是使用vue-router提供的标签。下面是两种方式的代码示例:
1. 使用JS实现:
```javascript
let routeUrl = this.$router.resolve({ path: "/surrender", params: {billId:21} });
window.open(routeUrl.href, '_blank');
```
2. 使用vue-router标签:
```html
<router-link target="_blank" :to="{path:'/surrender',params:{billId:21}}">打印</router-link>
```
在上述代码中,第一种方式通过获取路由对象的resolve方法解析路由,得到目标路由的href,然后使用window.open方法在新标签页中打开该路由。第二种方式则是使用vue-router提供的router-link标签,并设置target属性为"_blank",这样点击该标签时会在新标签页中跳转到指定路由。
希望以上信息能够解答您的问题。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *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^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* [在vue中,用路由router跳转打开一个新标签页](https://blog.csdn.net/pipizhou16/article/details/126162485)[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^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]
Vue3 路由跳转打开新的页面
在 Vue3 中,你可以使用 `router-link` 标签来实现路由跳转打开新的页面,示例如下:
```html
<router-link to="/new-page" target="_blank">打开新页面</router-link>
```
其中,`to` 属性指定跳转的路径,`target="_blank"` 属性表示在新的页面中打开链接。同时,需要确保在路由配置中添加了 `/new-page` 对应的路由。
另外,你也可以使用编程式导航实现路由跳转打开新页面,示例如下:
```javascript
// 在某个方法中
this.$router.push({ path: '/new-page' });
window.open('/new-page', '_blank');
```
其中,`this.$router.push` 方法用于跳转路由,`window.open` 方法用于在新的窗口中打开链接。需要注意的是,使用编程式导航时也需要在路由配置中添加对应的路由。