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

linkExactActiveClass: 'current'

});

Next, add a second key-value, specifying the name of the second router-view, sidebar.

Name the component you want to populate this area when the /about URL is navigated

to. For this, we will use the AboutContact component:

const router = new VueRouter({

routes: [

{

path: '/',

component: Home

},

{

path: '/about',

components: {

default: About,

sidebar: AboutContact

}

},

{

path: '*',

component: PageNotFound

}

],

linkActiveClass: 'active',

linkExactActiveClass: 'current'

});

Running the app in your browser will render both components, with the contents of the

contact component appearing in the sidebar.

Programmatically navigating with, redirecting, and adding an alias

While building your app, there may be situations that require some different navigation

techniques. These may be navigating programmatically, for example in a component or the
main Vue instance, redirecting users when they hit a specific URL, or loading the same

component with various URLs.