Vue3路由传参报错求助：Cannot read properties of undefined (reading 'image')

我第一次学Vue/JavaScript，现在碰到个解决不了的问题：用路由参数把数据传到下一页时总是报错。跳转后页面能加载但没内容，控制台报错“Cannot read properties of undefined (reading 'image')”，用的是Quasar框架，不确定有没有影响。

现有代码 #

首页代码 #

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

（注：原代码末尾标签存在笔误，已补全为</router-link>）

路由配置 #

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

showMedia页面初始代码 #

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);
  })
})

编辑补充 #

按照提示排查后，我把showMedia页面代码改成了这样，但还是报同样的错：

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);
  })
})

问题分析与解决步骤 #

1. 先确认接口返回的真实结构
   报错核心是response.data.image不存在，要么response.data本身是undefined，要么接口返回的结构里没有image字段。先在请求回调里打印返回内容，确认数据形态：

   .then((response) => {
     console.log('接口返回原始数据:', response.data)
     // 再根据实际结构处理赋值
   })
   

2. 检查路由传参的有效性
   在onMounted开头先打印传递过来的mediaUrl，确认地址是完整且有效的：

   onMounted(() => {
     const mediaUrl = router.params.mediaUrl;
     console.log('传递的接口地址:', mediaUrl)
     // 再执行axios请求
   })
   

   如果地址存在特殊字符（比如/、?等），需要编码后传参：
   首页修改：

   <router-link :to="{name: 'showMedia', params: {mediaUrl: encodeURIComponent(data.imageUrl)}}">
   

   showMedia页面解码：

   const mediaUrl = decodeURIComponent(router.params.mediaUrl);
   

3. 确认Quasar路由的基础配置
   检查MainLayout.vue中是否存在<router-view>标签，这是子路由内容的渲染入口，没有的话子页面内容无法显示。

4. 给模板加异步数据容错
   在页面模板中使用imageData时，添加空值判断，避免数据未返回时触发渲染报错：

   <img v-if="imageData" :src="imageData" />
   <!-- 或者用可选链语法兼容 -->
   <img :src="imageData?.toString()" />
   

内容的提问来源于stack exchange，提问作者stirling