Clever Geek Handbook

Nested routes split the static path

My css is placed inside a static directory.

HTML:

<html>
  <head>
    <link rel="stylesheet" href="static/font-awesome/css/font-awesome.min.css">
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

And I have nested routes

const routes = [
    {
        path: '/user/:id', component: Profile,
        children: [
            {
                path: 'feeds',
                component: ProfileFeeds
            },
            {
                path: 'photos',
                component: ProfilePhotos
            },
        ]
    },
    ... some other routes... ,
];

When I am outside the nested route, a static file is found. But, when I go to user/user_21/feeds

, Vue cannot find the css.

Working css:

http://localhost:8080/static/font-awesome/css/font-awesome.min.css

Enters the wrong static path:

http://localhost:8080/user/static/font-awesome/css/font-awesome.min.css

How can I solve this?

+6


source to share


2 answers


What if you bind an absolute url to start css with /

?



 <link rel="stylesheet" href="/static/font-awesome/css/font-awesome.min.css">
+7


source


This solution works fine if the application is right at the root of the domain. How do I specify paths when a VUE app is placed in a subfolder?



(I've defined a base property in the router config and a publicPath property in vue.config.js.)

0


source






More articles:


All Articles