vue新开标签页路由跳转
时间: 2024-07-23 16:01:34 浏览: 117
Vue.js 开发中,如果你想在新开一个标签页进行路由跳转,可以使用`vue-router`提供的 `meta` 属性配合浏览器的历史记录API。首先,在你的路由配置中设置每个需要新开标签页的路径的 `meta` 对象,通常会包含一个名为 `noopener` 或 `target` 的属性:
```javascript
// 路由配置
{
path: '/newTabRoute',
component: YourComponent,
meta: {
target: '_blank'
}
}
```
然后,在你的组件内部或者全局的地方,你可以使用如下的导航守卫(guard)来检测目标是否为 `_blank` 并开启新标签页:
```javascript
router.beforeEach((to, from, next) => {
if (to.meta.target === '_blank') {
// 使用 window.open 打开新标签页
const newTab = window.open(to.fullPath);
// 如果希望阻止当前页面刷新并强制跳转到新标签页
newTab.opener = null;
if (!newTab) {
console.error('Failed to open in a new tab');
next(false); // 不允许继续导航
} else {
next();
}
} else {
next(); // 正常导航
}
});
```
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)