Firefox环境下Vue.js项目跨站登录跳转出现路由重定向错误求助

问题根因 #

你遇到的是Firefox浏览器对Hash模式URL的特殊解析逻辑导致的异常：Firefox会优先解码hash段内的%23（即编码后的#符号），将其识别为新的hash分割符，导致你放在LoginPage路由后的参数里的%23%2Fsphome被提前解析为新的hash路由，直接跳过了LoginPage路由匹配，跳转到了#/sphome。Chrome、IE对hash段内编码字符的解析优先级更低，只会识别第一个#为hash分割符，因此不会触发该问题。 #

可行解决方案 #

• 方案1：调整参数位置（兼容性最好，改造成本最低） #

  将携带的跳转参数从hash段移到hash分隔符#之前的search段，调整后的访问链接格式为：

  https://www.host.com/admin/?loginrul=selectportal.html%23%2Fsphome&type=login#/LoginPage
  

  此时参数属于URL的search部分，不受hash解析逻辑影响，所有浏览器均可正常识别，Vue中可以通过window.location.search或者$route.query正常获取参数，原有业务逻辑基本不需要改动。

• 方案2：参数二次编码（不调整URL结构的前提下兼容） #

  如果不能修改参数存放位置，对loginrul参数的内容做二次URL编码：
  原跳转地址selectportal.html#/sphome第一次编码结果为selectportal.html%23%2Fsphome，第二次编码结果为selectportal.html%2523%252Fsphome，将二次编码后的内容作为参数传入。
  在LoginPage页面获取参数后，先调用一次decodeURIComponent即可还原出原跳转地址，避免Firefox提前解码%23触发异常路由跳转。

• 方案3：路由守卫拦截兜底 #

  在Vue全局路由前置守卫中添加Firefox兼容逻辑，主动拦截异常跳转：

  router.beforeEach((to, from, next) => {
    const fullHash = window.location.hash
    // 判断当前hash包含登录参数但未进入登录页的异常场景
    if (fullHash.includes('loginrul') && fullHash.includes('type=login') && to.path !== '/LoginPage') {
      // 提取参数后强制跳转到登录页
      const queryStr = fullHash.split('?')[1]
      next(`/LoginPage?${queryStr}`)
      return
    }
    next()
  })
  

• 方案4：切换为History路由模式 #

  直接将Vue路由从Hash模式改为History模式，从根本上避免hash段解析差异问题，仅需要后端配合配置好404页面的 fallback 规则即可。

验证方法 #

你可以在Firefox控制台分别打印跳转前后的window.location.hash值，即可确认是否为浏览器提前解码%23导致的路由识别错误。

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