How can I pass a parameter in vue 3

I am learning learning Vue/JavaScript for the first time and I've ran into a problem I am unable to figure out. I am trying to pass a some data I need to the next page via a parameter. Every time I do, it throws an error. The code I have so far is as follows. for the index page:

<router-link :to="{name: 'showMedia', params: {mediaUrl: data.imageUrl}}">
... some code ...
</router

Next my router is as follows:

const routes = [
  {
    path: '/',
    component: () => import('layouts/MainLayout.vue'),
    children: [
      { path: '/showMedia/:mediaUrl', name: 'showMedia', component: () => import('pages/MediaPage.vue') }
    ]
  },

Lastly is the 'showMedia' page.

import axios from 'axios'
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router';

const router = useRoute();
const imageData = ref();

onMounted(() => {
  const mediaUrl = router.params.mediaUrl;
  axios.get(mediaUrl)
    .then((response) => {
      imageData.value = response.data
    }).catch(error => {
      console.log(error);
  })
})

When trying to navigate to the page, it loads, but nothing shows up and in the console I am seeing error message that say "Cannot read properties of undefined (reading 'image')". Thank you for any help. Also, I am using quasar with this app, not sure if that makes a difference or not.

EDIT Based on the reply I got, I did some more digging and found one error I made. in the showMedia page where I'm getting the response.data it should have been response.data.image. So I've modified my code to look like this.

onMounted(() => {
  const mediaUrl = router.params.mediaUrl;
  axios.get(mediaUrl)
    .then((response) => {
      imageData.value = 'data:image/jpeg;base64,' + response.data.image
    }).catch(error => {
      console.log(error);
  })
})

Unfortunately this has not changed anything. I'm still seeing the same error.