Decoupling Params with Props

In the index.js file, let’s adjust the configuration of the about route with an additional property called props.

By setting this property’s value as a function which accepts a route and returns an object containing an user field of value based on route.query.user, the router will automatically understand and map any route.query parameters into the props of the view component accordingly:

{
    path: '/about',
    name: 'about',
    component: () => import('../views/AboutView.vue'),
     props: route => ({ user: route.query.user || 'Adam' })
}

In the AboutView.vue file, we will define a prop type user as follows:

<script setup>
import { defineProps } from 'vue'
const props = defineProps({
    user: String
})
</script>

And in the <template> section,...