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

Using static props

Along with a Boolean value, the props parameter in the route can also accept an object with

a list of the props to pass. This allows you to utilize the same component and alter its state
based on the URL, without requiring the variables to be passed via the path for example, if

you want to activate or deactivate part of the template.

When passing the props object in via the URL, it overwrites the whole

props object, meaning you either have to declare none or all of them. The

props variables will also take priority over the dynamic, URL-based

variables.

Update your new /:name/user path to include the props in the route - remove the :name

variable from the path so it becomes just /user:

const router = new VueRouter({

routes: [

{

path: '/',

component: Home

},

{

path: '/about',

component: About

},

{

path: '/user',

component: User,

props: {

name: 'Sarah',

emotion: 'happy'

}

},

{

path: '/:name/user/:emotion',

component: User,

props: true

}

],

linkActiveClass: 'active',

linkExactActiveClass: 'current'

});