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

Add a header, main, and footer element to your app. Give yourself a logo in the header

and credits in the footer; in the main HTML element, place the router-view placeholder:

<div id="app">

<header>

<div>LOGO</div>

</header>

<main>

<router-view></router-view>

</main>

<footer>

<small>© Myself</small>

</footer>

</div>

Everything in the app view is optional, except the router-view, but it gives you an idea of

how the router HTML element can be implemented into a site structure.

The next stage is to initialize the Vue-router and instruct Vue to use it. Create a new

instance of VueRouter and add it to the Vue instance—similar to how we added Vuex in

the previous section:

const router = new VueRouter();

new Vue({

el: '#app',

router

});

We now need to tell the router about our routes (or paths), and what component it should

load when it encounters each one. Create an object inside the Vue-router instance with a
key of routes and an array as the value. This array needs to include an object for each

route:

const router = new VueRouter({

routes: [

{

path: '/',

component: Home

},

{