CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-routervuex
Arun D
Arun D

Reputation: 2387

Second level vue route throws error when accessed directly

I am using vue-router in my vue application. I have the following routes in my application.

const routes = [
    {name: "home", path: "/", component: Home},
    {name: "user", path: "/user", component: User},
    {name: "edit-user", path: "/user/edit", component: EditUser}
];

const router = new VueRouter({
    routes: routes,
    mode: 'history'
});

Here both the routes are working perfectly when accessed using router-link as given below.

<router-link to="/user">Go to user</router-link>
<router-link to="/user/edit">Edit user</router-link>

If I am accessing the routes directly by page refresh the route "/user" works perfectly. But the route "/user/edit" shows a black page with just the following error in the console (without any other error details).

Uncaught SyntaxError: Unexpected token <

Can anyone help me out to solve this?

Upvotes: 3

Views: 3545

Answers (2)

Umer Khan
Umer Khan

Reputation: 267

I was facing the same issue I resolved this by adding

publicPath: '/'

in my Webpack config file suggested on https://github.com/webpack/webpack-dev-middleware/issues/205#issuecomment-315847782

Thanks to Mark M. Muskardin

Upvotes: 18

Arun D
Arun D

Reputation: 2387

It was caused due to a very small reason. In my main HTML page, the js file was linked as follows:

<script type="text/javascript" src="js/app.js"></script>

The issue was fixed by changing the src value from "js/app.js" to "/js/app.js" as follows:

<script type="text/javascript" src="/js/app.js"></script>

Upvotes: 9

Related Questions