Introducing Vue-Router and Loading URL-Based Components Chapter 8};
Before the props work, Vue-router needs to be told to use them with a particular route.
This is enabled within the routes array, on a route-by-route basis and, initially, is set with
a props: true value:
const router = new VueRouter({
routes: [
{
path: '/',
component: Home
},
{
path: '/about',
component: About
},
{
path: '/:name/user/:emotion',
component: User,
props: true
}
],linkActiveClass: 'active',
linkExactActiveClass: 'current'
});Setting prop defaults
With the route parameters now available as props, this gives us the flexibility of easily
creating a default. If we had wanted to make a parameter optional, we would have needed
to add several if() statements to check the existence of the variables.
With props, however, we can declare defaults as we did earlier. Add a default for the
emotion variable:
const User = {
template: `<h1>{{ formattedName }} is {{ this.emotion }}</h1>`,
props: {
name: String,
emotion: {
type: String,
default: 'happy'
}
},
computed: {