vue-router, can't refresh routes with dynamic id's

Question

I'm having trouble with my vue-router. I've copied a portion of my router for you to view and also a portion of the component in which I am using the the router-view. As you can see, I am using props as it's my understanding that props are the advanced way of passing $router.params. Also, this is a nested router-view. I can route to and from the nested routes just fine, but when I click refresh, I get these errors in the console.

"Failed to load resource: the server responded with a status of 404 (Not Found)"

"GET http://localhost:8080/distilleries/1/dist/build.js net::ERR_ABORTED"

I am wondering if anyone can help.

{
  path: '/distilleries/:id',
  component: Distillery,
  props: true,
  children: [
    {
      path: '',
      component: DistilleryAbout,
      name: 'DistilleryAbout',
      props: true
    },
    {
      path: 'spirits',
      props: true,
      component: DistilleryProducts,
      name: 'DistilleryProducts'
    },
    {
      path: 'awards',
      props: true,
      component: DistilleryAwards,
      name: 'DistilleryAwards'
    },
    {
      path: 'reviews',
      props: true,
      component: DistilleryReviews,
      name: 'DistilleryReviews'
    },
    {
      path: 'recipes',
      props: true,
      component: DistilleryRecipes,
      name: 'DistilleryRecipes'
    },
    {
      path: 'media',
      props: true,
      component: DistilleryMedia,
      name: 'DistilleryMedia'
    }
  ]
}

<v-flex xs12>
    <v-toolbar class="lb" flat>
      <v-toolbar-items style="margin: 0 auto">
        <v-layout row wrap>
          <v-flex xs6 md12 class="mt-3">
            <router-link
                    tag="span"
                    v-for="items in menuItems"
                    :key="items.id"
                    class="itemsButton ma-3 pa-3 cb"
                    :to="{ name: items.link }"
                    >{‌{ items.title }}
            </router-link>
          </v-flex>
        </v-layout>
      </v-toolbar-items>
    </v-toolbar>
    <router-view :distillery="distillery"></router-view>
  </v-flex>

Traxo Traxo · Accepted Answer · 2017-12-23T09:19:45

From vue-router docs:

Since our app is a single page client side app, without a proper server configuration, the users will get a 404 error if they access http://oursite.com/user/id directly in their browser. Now that's ugly.

So you need to add mode: 'history' in router:

const router = new VueRouter({
    mode: 'history',
    routes: [...],
})

And add configuration depending on your server.

vue-router, can't refresh routes with dynamic id's

1 Answers