Vue.js中如何将Nav.vue内导航项跳转至新标签页或新localhost

针对你在Nav.vue中已定义的available导航项，以下两种方案可以实现点击时在新标签页打开对应组件：

方案一：结合RouterLink实现 #

如果你的导航是用<router-link>渲染的，只需针对目标导航项添加target="_blank"，并通过路由解析生成完整URL（避免路径错误）：

<template>
  <div class="sidebar">
    <router-link
      v-for="item in sidebar"
      :key="item.name"
      :to="item.path"
      :target="item.name === 'available' ? '_blank' : '_self'"
      :href="item.name === 'available' ? getFullUrl(item.path) : undefined"
    >
      {{ item.name }}
    </router-link>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sidebar: [
        // 其他导航项
        { name: 'available', path: '/available' }
      ]
    }
  },
  methods: {
    getFullUrl(path) {
      // 解析路由生成完整的localhost地址
      const resolvedRoute = this.$router.resolve({ path })
      return resolvedRoute.href
    }
  }
}
</script>

方案二：自定义点击事件 #

如果是用普通DOM元素（如div、button）渲染导航，可通过点击事件判断导航项，针对性打开新标签页：

<template>
  <div class="sidebar">
    <div
      v-for="item in sidebar"
      :key="item.name"
      @click="handleNavClick(item)"
      class="nav-item"
    >
      {{ item.name }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sidebar: [
        // 其他导航项
        { name: 'available', path: '/available' }
      ]
    }
  },
  methods: {
    handleNavClick(item) {
      if (item.name === 'available') {
        // 解析路由获取完整URL，确保新标签页地址正确
        const fullUrl = this.$router.resolve({ path: item.path }).href
        window.open(fullUrl, '_blank')
      } else {
        // 其他导航项保持单页跳转
        this.$router.push(item.path)
      }
    }
  }
}
</script>

注意事项 #

• 必须使用$router.resolve生成完整URL，否则直接使用相对路径可能因项目部署路径（如子目录）导致新标签页地址错误。
• 浏览器通常不会拦截用户主动点击触发的window.open，但如果是异步触发可能会被拦截，确保点击事件是同步执行的。
• 无论Vue Router是hash模式还是history模式，$router.resolve都会生成正确的URL格式。

内容的提问来源于stack exchange，提问作者Saravana mms