Vue Router右键新标签页打开路径不符合预期问题

问题出在hash模式下的base路径配置位置：你当前把base写在了createRouter的配置里，但hash模式的基础路径需要传递给createWebHashHistory构造函数，而非createRouter的base选项。

修正后的配置 #

将createWebHashHistory的调用改为传入目标基础路径/dashboard/，调整后的路由代码如下：

const router = createRouter({
    history: createWebHashHistory('/dashboard/'), // 把base路径传至此处
    routes: routes.get_routes(),
})

原理说明 #

• 使用createWebHashHistory时，传入的base参数会作为URL中#符号前的路径前缀，生成的<a>标签href会变为/dashboard/#/event/2668/next。
• 正常点击<router-link>时，Vue Router通过前端路由处理，不受href完整路径影响；但右键新标签页打开时，浏览器会直接解析href的完整路径，此时正确的前缀就能保证跳转到目标URL。

验证效果 #

修改后，<router-link>生成的链接会变为：

<a href="/dashboard/#/event/2668/next">Event</a>

右键新标签页打开时，就会跳转到https://example.com/dashboard/#/event/2668/next，符合需求。

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