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.
JavaScript
x
2
1
<a href="http://localhost:8080/reset_password/{{ reset_email_token }}">Passwort zurücksetzen</a>
2
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:
JavaScript
1
47
47
1
Vue.use(VueRouter);
2
3
const router = new VueRouter({
4
routes: [
5
{
6
path: "/login",
7
name: "Login",
8
component: Login,
9
},
10
11
{
12
path: "/reset_password/:token", // --> this is the path I want to access from external
13
name: "resetPassword",
14
component: resetPassword,
15
},
16
17
{
18
path: "/forgot_password", // --> this also routes to "/" if coming from extern
19
name: "forgotPassword",
20
component: forgotPassword,
21
},
22
23
{
24
path: "/", // --> this is where url requests from external end up
25
redirect: "login",
26
name: "Layout",
27
component: Layout,
28
meta: { authRequired: true },
29
30
children: [
31
{
32
path: "/start",
33
name: "Start",
34
component: Start,
35
meta: { authRequired: true },
36
},
37
],
38
},
39
{
40
path: "*",
41
name: "Error",
42
component: Error,
43
},
44
],
45
});
46
47
Advertisement
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
JavaScript
1
5
1
const router = new VueRouter({
2
mode: "history", // --> added this line
3
routes: [ ],
4
});
5