Vue-Router URL from external source always redirects to “/”

I am running Vue 2 directly off the Vue dev server.

I am trying to enter a vue route (vue-router) from an external url.

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

For some reason I don’t know, vue-router always redirects my request and handles it as if it comes from “/”, which automatically redirects to “/login”

I found a similiar questions here (https://forum.vuejs.org/t/access-to-a-vue-route-from-external-link/107250) but there is no solution to it.

Has anyone knowledge of this problem and knows how to appraoch a possible fix? Thanks in advance!

My routes.js file:

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

Switching vue-router mode from ‘hash’ to ‘history’ solved the problem for me.

See here for references on history mode: https://v3.router.vuejs.org/guide/essentials/history-mode.html

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

Advertisement

Answer