首页vue新开标签页路由跳转

vue新开标签页路由跳转

时间: 2024-07-23 20:01:34 浏览: 219

Vue.js 开发中，如果你想在新开一个标签页进行路由跳转，可以使用vue-router提供的 meta 属性配合浏览器的历史记录API。首先，在你的路由配置中设置每个需要新开标签页的路径的 meta 对象，通常会包含一个名为 noopener 或 target 的属性：

// 路由配置
{
  path: '/newTabRoute',
  component: YourComponent,
  meta: {
    target: '_blank'
  }
}

然后，在你的组件内部或者全局的地方，你可以使用如下的导航守卫（guard）来检测目标是否为 _blank 并开启新标签页：

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(); // 正常导航
  }
});