如何实现锚元素左键触发JS函数、中键打开新页面（Vue+vue-router）

要复现Jira这种差异化点击行为，核心是区分左键与中键事件，分别对应更新当前路由查询参数和新标签页打开独立页面两个逻辑，以下是基于vue-router的具体实现方案：

1. 配置基础路由 #

首先在路由文件中定义时间线页面和独立议题页面的路由规则：

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Timeline from '../views/Timeline.vue'
import IssueDetail from '../views/IssueDetail.vue'

const routes = [
  {
    path: '/timeline',
    name: 'Timeline',
    component: Timeline
  },
  {
    path: '/browse/:issueId',
    name: 'IssueDetail',
    component: IssueDetail,
    props: true // 直接把issueId作为组件props传入
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

2. 时间线组件的事件处理 #

在时间线页面（Timeline.vue）中，给议题名称元素绑定点击/鼠标松开事件，区分不同按键行为：

模板部分 #

<template>
  <div class="timeline-container">
    <!-- 议题列表 -->
    <div 
      v-for="issue in issueList" 
      :key="issue.id"
      class="issue-item"
      @click="handleLeftClick($event, issue.id)"
      @mouseup="handleMiddleClick($event, issue.id)"
    >
      {{ issue.title }}
    </div>

    <!-- 右侧详情面板 -->
    <div class="detail-panel" v-show="currentSelectedIssue">
      <h3>议题详情：{{ currentSelectedIssue }}</h3>
      <!-- 这里可以根据issueId请求并渲染具体内容 -->
    </div>
  </div>
</template>

脚本部分（Vue3 Composition API） #

<script setup>
import { ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()

// 模拟议题数据，实际项目中从接口获取
const issueList = ref([
  { id: 'AT-33', title: '修复用户中心头像上传失败问题' },
  { id: 'AT-34', title: '优化仪表盘数据加载动画' }
])

// 当前选中的议题ID，从路由查询参数初始化
const currentSelectedIssue = ref(route.query.selectedIssue || null)

// 监听路由查询参数变化，同步面板状态
watch(() => route.query.selectedIssue, (newIssueId) => {
  currentSelectedIssue.value = newIssueId
})

// 左键点击：更新当前路由的查询参数
function handleLeftClick(event, issueId) {
  // 只处理左键（button=0）
  if (event.button !== 0) return
  
  event.preventDefault()
  // 用replace更新路由，避免历史记录堆积
  router.replace({
    query: {
      ...route.query,
      selectedIssue: issueId
    }
  })
}

// 中键点击：在新标签页打开独立议题页面
function handleMiddleClick(event, issueId) {
  // 只处理中键（button=1）
  if (event.button !== 1) return
  
  event.preventDefault()
  // 获取独立页面的完整URL
  const targetUrl = router.resolve({ 
    name: 'IssueDetail', 
    params: { issueId } 
  }).href
  // 新标签页打开
  window.open(targetUrl, '_blank')
}
</script>

3. 关键细节说明 #

• 事件区分：中键点击不会触发click事件，所以用mouseup事件来捕获中键操作，确保兼容性
• 路由更新方式：使用router.replace()而不是push()，避免用户点击回退按钮时反复切换查询参数，保持历史记录整洁
• 路由监听：通过watch监听查询参数变化，确保直接修改URL时详情面板能同步更新
• 降级处理：如果是用<a>标签渲染议题名称，可以给href属性设置独立页面的链接，这样即使JS失效，也能作为普通链接跳转，提升页面可用性

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