Reputation: 457
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,
},
],
});
Upvotes: 2
Views: 1872
Reputation: 457
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: [ ... ],
});
Upvotes: 2