Changing the folder for Vue-router

There may be scenarios where you want to host your Vue app in a sub-folder of your website. In this instance, you will need to declare the base folder of your project so Vue-router can construct, and listen out for, the correct URLs.

For example, if your app was based on a /shop/ folder, you would declare it using the base parameter on the Vue-router instance:

const router = new VueRouter({
  base: '/shop/',

  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About
    }
  ]
});

The value of this needs the slash at both the beginning and end.

Along with base, there are several other configuration options available for Vue-router—it is well worth being familiar with them, as they may solve a problem you have later on.

...