Problems with extracting params in nuxt 3-CodePudding

Hi guys I'm having challenges with extracting params from my route in nuxt 3.

The structure of my dynamic route looks like this exam_[id]_[applicant_id].vue and after loading my route looks like this http://localhost:3000/e-recruitment/exam_cl96q0u040000v1ocg2ffryio_3 and my to dynamic params are cl96q0u040000v1ocg2ffryio and 3, when I console log the params object I get this object screenshot, what might be the problem

onMounted(async ()=>{
            console.log(route.params.applicant_id)
            console.log(route.params.id)
            })

CodePudding user response：

No need for onMounted hook or async function here. You need to call the useRoute composable.

<script setup>    
const route = useRoute();
console.log(route.params.applicant_id)
console.log(route.params.id)
</script>

CodePudding user response：

The problem lies within the underscores (_) used in your pages route name.

If you rename your page to exam-[id]-[applicant_id].vue, the route params, when accessing /exam-cl96q0u040000v1ocg2ffryio-3 look like this:

{id: 'cl96q0u040000v1ocg2ffryio', applicant_id: '3'}