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

(singke) #1
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.

Free download pdf