Introducing Vue-Router and Loading URL-Based Components Chapter 8component: About
},
{
path: '/about/meet-the-team',
component: MeetTheTeam
}
],linkActiveClass: 'active',
linkExactActiveClass: 'current'
});When navigating to this page, you will notice both the Home and About links have the
active class and neither have the current class we created. If you were to create a link in
your navigation to this page, a current class would be applied to that.
Dynamic routes with parameters
Vue router easily allows you to have dynamic URLs. A dynamic URL allows you to use the
same component to display different data while using the same template. An example of
this would be for a shop, where all the category pages look the same but display different
data based on the URL. Another example would be a product detail page—you don't want
to have to create a component for every product, so instead, you use one component with a
URL parameter.
URL parameters can appear anywhere in the path, and there can be one or many. Each
parameter gets assigned a key, so it can be created and accessed consistently. We'll go into
dynamic routes and parameters in more detail during Chapter 9, Using Vue-Router Dynamic
Routes to Load Data. For now, we'll build a basic example.
Before we head into creating the component, let's examine a new variable available to
us—this.$route. In a similar way to how we accessed the global store with Vuex, this
variable allows us to access a lot of information about the routes, URLs, and parameters.
In your Vue instance, as a test, add a mounted() function. Inside console.log, insert the
this.$route parameter:
new Vue({
el: '#app',router,
mounted() {
console.log(this.$route);