CODEWITHSUNDEEP
vue.js
user931018
user931018

Reputation: 703

VueJS app as subdomain throws 404 when a path is added

I have a portfolio site portfolio.com and a subdomain which points to a VueJS frontend hosted on Netlify vuejsapp.portfolio.com

Users upload files to the app and it generates a download link URL, say vuejsapp.portfolio.com/download/048677a. When I navigate to the link within the VueJS app (by clicking a button to redirect after it's uploaded) it redirects to the Download component without issue. But if I copy and paste that link directly in my browser it throws a 404 error. Why is this?

I know it has to do with a Vue Router configuration but I can't seem to find much information about it or perhaps I'm looking in the wrong place. Could someone tell me what I'm missing or point me to some relevant documentation please?

My router.js file:

 Vue.use(Router);

    export default new Router({
      mode: "history",
      base: process.env.BASE_URL,
      routes: [
        {
          path: "/",
          name: "home",
          component: Home,
        },
        {
          path: "/about",
          name: "about",
          component: About
        },
        {
          path: "/download/:id",
          name: "download",
          component: Download,
          props: route => ({ id: route.params.id }),
        }
      ]
    });

Upvotes: 0

Views: 928

Answers (1)

Aer0
Aer0

Reputation: 3907

Since the code/setup is running properly on your local environment and only breaking on Netlify its pretty clear that you're running into a wrong server configuration issue.

Your Netlify environment has to know that it should always route any requests to / and leave the routing to your Vue App. You can read more about how to resolve that in the Netlify docs.

Upvotes: 1

Related Questions