Passing Data to Router Views

Dynamic Route Matching with Params

One way to pass a single data value, referred to as a param, to a component is via the router path.  We specify a param in a route by including a : followed by some identifier in the path.

For example the paths /users/joe/posts/123 and /users/harry/posts/456 would match the path below and load the PostView component in the <RouterView>

const routes = [

{ path: ‘/users/:username/posts/:postId’, component: PostView}

]

The params can be accessed in the component via the route object or if we need to fetch data based on the value of a param we can the beforeRouteUpdate nagivation guard to register a callback to be called just before the

import { useRoute, onBeforeRouteUpdate } from ‘vue-router’

const route = useRoute()