来自外部源的 Vue-Router URL 总是重定向到“/”

Question

我在 Vue 开发服务器上直接运行 Vue 2。

我正在尝试从外部 url 输入 vue 路由（vue-router）。

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

由于某种我不知道的原因，vue-router 总是重定向我的请求并处理它，就好像它来自“/”一样，它会自动重定向到“/login”

我在这里发现了一个类似的问题（ https://forum.vuejs.org/t/access-to-a-vue-route-from-external-link/107250 ）但没有解决方案。

有没有人知道这个问题并知道如何解决可能的问题？ 提前致谢！

我的 routes.js 文件：

Vue.use(VueRouter);

const router = new VueRouter({
routes: [
    {
    path: "/login",
    name: "Login",
    component: Login,
    },

    {
      path: "/reset_password/:token", // --> this is the path I want to access from external
      name: "resetPassword",
      component: resetPassword,
    },

    {
      path: "/forgot_password", // --> this also routes to "/" if coming from extern
      name: "forgotPassword",
      component: forgotPassword,
    },

    {
      path: "/", // --> this is where url requests from external end up
      redirect: "login",
      name: "Layout",
      component: Layout,
      meta: { authRequired: true },

      children: [
        {
          path: "/start",
          name: "Start",
          component: Start,
          meta: { authRequired: true },
        },
      ],
    },
    {
      path: "*",
      name: "Error",
      component: Error,
    },
  ],
});
 

Answer 1

将 vue-router 模式从“哈希”切换到“历史”为我解决了这个问题。

有关历史模式的参考，请参见此处： https ://v3.router.vuejs.org/guide/essentials/history-mode.html

const router = new VueRouter({
  mode: "history", // --> added this line
  routes: [ ... ],
});