Vue.js 2 Web Development Projects

The dynamic route

Since we are going to put the ticket details in another route, you can undo what we just did in the Tickets component.

The route will be a child route of the tickets route, and will be of the form /tickets/<id> where <id> is the ID of the ticket being displayed. This is possible thanks to the dynamic route matching feature of vue-router!

You can add dynamic segments to your route path with the semicolon. Then, each segment will be exposed in the route params object. Here are some examples of routes with parameters:

Pattern	Example path	$route.params value
/tickets/:id	/tickets/abc	{ id: 'abc' }
/tickets/:id/comments/:comId	/tickets/abc/comments/42	{ id: 'abc', comId: '42' }

1. Let's add the new route in the router.js ...