Vue2外部链接访问vue-router路由始终重定向到根路径/问题求助

• 开发服务器路由回退规则缺失：Vue项目是单页应用，仅index.html为入口文件。直接在地址栏访问/reset_password/:token、/forgot_password这类非根路径时，服务器会优先查找路径对应物理文件，找不到时若未配置将所有请求重定向到index.html的规则，就会自动回退到根路径/，触发根路由重定向到/login的逻辑。
• 全局路由守卫逻辑漏洞：根路由配置了authRequired: true鉴权标记，若前置守卫router.beforeEach未提前放行登录、重置密码、忘记密码这类公开路由，默认所有路径都校验登录状态，未登录时直接跳转根路径/，会覆盖原本要访问的目标路由。
• 路由模式不匹配：Vue Router默认使用hash模式，路径需带#前缀（如http://localhost:8080/#/reset_password/xxx），若直接访问不带#的路径，服务器无法识别为前端路由，同样会触发根路径回退。

1. 配置history模式路由回退（推荐，路径无#更美观） #

第一步：调整路由配置 #

修改路由初始化代码，显式声明history模式，给公开路由添加不需要鉴权的标记，修正根路由重定向路径为绝对路径：

Vue.use(VueRouter);

const router = new VueRouter({
  mode: 'history', // 显式指定history模式
  routes: [
    {
      path: "/login",
      name: "Login",
      component: Login,
      meta: { authRequired: false } // 标记为公开路由，无需鉴权
    },
    {
      path: "/reset_password/:token",
      name: "resetPassword",
      component: resetPassword,
      meta: { authRequired: false } // 标记为公开路由，无需鉴权
    },
    {
      path: "/forgot_password",
      name: "forgotPassword",
      component: forgotPassword,
      meta: { authRequired: false } // 标记为公开路由，无需鉴权
    },
    {
      path: "/",
      redirect: "/login", // 改为绝对路径，避免相对路径匹配异常
      name: "Layout",
      component: Layout,
      meta: { authRequired: true },
      children: [
        {
          path: "/start",
          name: "Start",
          component: Start,
          meta: { authRequired: true },
        },
      ],
    },
    {
      path: "*",
      name: "Error",
      component: Error,
    },
  ],
});

注意：路由匹配是从上到下优先级递减，需保证精确匹配的公开路由放在根路由、通配符路由之前，你当前的路由顺序符合要求。

第二步：配置开发服务器支持history回退 #

在项目根目录找到或新建vue.config.js文件，添加如下配置：

module.exports = {
  devServer: {
    historyApiFallback: true, // 开启后所有找不到对应文件的请求都会返回index.html，交给前端路由处理
  }
}

修改完成后重启开发服务器即可生效。生产环境部署时也需要给Nginx、Apache等web服务器配置对应的history路由回退规则，否则线上直接访问子路由也会出现404问题。

2. 修正全局路由守卫逻辑 #

找到项目中定义router.beforeEach的代码，调整鉴权逻辑，优先放行公开路由，禁止无差别跳转到根路径，参考代码如下：

router.beforeEach((to, from, next) => {
  // 公开路由直接放行
  if (!to.meta.authRequired) return next()
  // 校验登录状态
  const isLogin = !!localStorage.getItem('access_token') // 替换为你实际的登录状态判断逻辑
  if (isLogin) {
    next()
  } else {
    // 未登录直接跳登录页，可携带redirect参数方便登录后跳回目标页，不要跳根路径
    next(`/login?redirect=${encodeURIComponent(to.fullPath)}`)
  }
})

3. 使用默认hash模式（无需修改服务器配置） #

如果不需要无#的美观路径，无需调整服务器配置，直接把外部访问的链接改为带hash的格式即可：

<a href="http://localhost:8080/#/reset_password/{{ reset_email_token }}">Passwort zurücksetzen</a>

hash模式下#后的路径内容不会发送给服务器，服务器始终返回根目录的index.html，前端路由会自动识别#后的路径完成匹配，不会出现重定向问题。

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