Can't access deep routes, using Vue

Questions
1

For some reason if I have my routes as

{
    path: '/notifications',
    component: NotificationsPage,
    master: true,
    detailRoutes: [
      {
        path: '/detail/:id',
        component: NotificationDetailsPage 
      },
    ]
  },

and I try to access localhost:8080/notifications it works, but localhost:8080/details/foo won’t work. I get the following error:

The resource from “http://localhost:8080/detail/js/app.js” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).

I don’t know why I’m getting that error, it happens with any route that has more than one level in depth within it, such as the details page, or if I had something like 'user/profile" it would fail also, while trying to get to the /user/js/app.js file.
I’m aware that file doesn’t exist, what I don’t know is why it is trying to access it in the first place, it’s just another route, no need to look for another JS.

Am I missing something here?

2

You have some wrong paths for JS files, /user/js/app.js should be referenced from root. If you use Webpack make sure you have publicPath: '/' in Webpack config

3

Worked as a charm, but you might want to check the vue cli generated templates, they do not work right away for some odd reasons, extra commas and stuff.
This is the only issue I’ve found I wasn’t able to solve by myself.

Thanks a lot man, have a great weekend!

4

@nolimits4web True, like @Apbsh said, the vue webpack comes with publicPath:"" as default and this was the reason If hit browser reload the url with /about/ it did a blank page. Thank.