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

To do this, create a second router-view element as a sibling to your original one. Leave

the original one in place, but add a name attribute to the second, with an appropriate title:

<main>

<router-view></router-view>

</main>

<aside>

<router-view name="sidebar"></router-view>

</aside>

When declaring your routes in the router instance, we are now going to use a new

key, components, and remove the previous singular component key. This accepts an object

with key-value pairs of the name of the view and the name of the component.

It's advisable to leave your main route unnamed, so you don't need to

update every route. If you decide to name your main route, you would be

required to do this next step for every route in your app.

Update the About route to use this new key and make it into an object. The next step is to

tell the code where each component will go.

Using default as the key, set the About component as the value. This puts the content from

the About component in your unnamed router-view, the main one. This is also what

using the singular component key is shorthand for:

const router = new VueRouter({

routes: [

{

path: '/',

component: Home

},

{

path: '/about',

components: {

default: About

}

},

{

path: '*',

component: PageNotFound

}

],

linkActiveClass: 'active',