Vue生产环境路由识别及修改a标签href后跳转异常的问题咨询

兄弟我太懂你这种憋屈的情况了！在Vue构建的SPA里，你用原生JS改了a标签的href，明明浏览器里看元素属性已经是新地址了，但一点击还是跳旧路由——这根本不是你改DOM的方式不对，而是Vue的路由系统会拦截所有a标签的点击事件，它压根不看你DOM里的href属性，而是从自身的路由配置或组件绑定的路由信息来处理跳转逻辑，所以才会出现“显示和实际跳转分家”的问题。

给你几个实用的解决思路，按优先级来：

1. 绕过Vue路由拦截，强制原生跳转（最直接的方案） #

直接给你修改后的a标签绑定点击事件，阻止Vue默认的路由拦截行为，手动触发原生页面跳转：

// 先定位到你修改过的那个a标签（可以根据文本、原href等特征查找）
const targetLink = document.querySelector('a[href="https://example.com/new"]');

// 绑定点击事件，覆盖Vue的拦截逻辑
targetLink.addEventListener('click', function(e) {
  // 阻止Vue的路由跳转默认行为
  e.preventDefault();
  // 手动跳转到你设置的新地址
  window.location.href = this.href;
});

这个方法完全不依赖项目的内部配置，用原生JS就能搞定，适合你这种只能通过自定义HTML/CSS/JS来改的场景。

2. 从根源修改Vue路由配置（更彻底的方案） #

如果你能访问到项目的Vue路由实例（有些项目会把$router挂载到全局window对象上），可以直接修改路由的配置规则，从根源上解决跳转问题：

// 找到对应旧路由的配置项
const oldRoute = window.$router.options.routes.find(route => route.path === '/old');

if (oldRoute) {
  // 修改路由的path为新地址
  oldRoute.path = '/new';
  // 重新添加路由规则，让修改生效
  window.$router.addRoutes(window.$router.options.routes);
}

这种方式改完之后，不管是a标签点击还是其他路由跳转方式（比如this.$router.push）都会指向新地址，比改DOM更靠谱，但前提是你能拿到全局的路由实例。

3. 给a标签加特殊标记，让Vue路由忽略它 #

有些Vue项目的路由配置里会预设忽略带有特定属性的a标签，比如data-skip-router。你可以给修改后的a标签加上这类属性：

targetLink.setAttribute('data-skip-router', 'true');

不过这个方案的前提是项目的路由拦截逻辑已经做了相关处理，如果项目本身没这个规则，还是前两种方法更稳妥。

备注：内容来源于stack exchange，提问作者AbdulazizYas