Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

Introducing Vue-Router and Loading URL-Based Components Chapter 8

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.

Linking to the different routes

With the router working as expected, we can now proceed with adding links into our

application, allowing the user to navigate around the website. Links can be achieved in two
ways: we can use a conventional tag, or alternatively we can utilize

using the router-link element, it works the same as an tag, and in fact gets converted to