Vue3子组件未显示及路由匹配失败问题求助

问题1：路由报错No match found for the location with path "/questionnaire" #

原因 #

路由配置中问卷页面的路径是/QuestionnaireView，但实际访问路径是/questionnaire，两者路径名、大小写不匹配，导致路由无法找到对应组件。同时项目未设置根路径/的重定向规则，访问根路径也会触发类似报错。

解决步骤 #

1. 修改路由配置，将问卷页面路径改为/questionnaire，与访问路径保持一致；
2. 添加根路径重定向规则，避免访问/时出错。

修改后的index.js代码：

import { createRouter, createWebHashHistory} from 'vue-router'

const router = createRouter({
    history: createWebHashHistory(import.meta.env.BASE_URL),
    routes: [
    // 根路径重定向到首页
    {
      path: '/',
      redirect: '/IndexView'
    },
    {
      path: '/IndexView',
      name: 'indexView',
      component:() => import('../Views/IndexView.vue'),
    },
    {
      path: '/questionnaire',
      name: 'questionnaire',
      component: () => import('../Views/QuestionnaireView.vue'),
    },
    {
      path: '/ProductsView',
      name: 'Products',
      component: () => import('../Views/ProductsView.vue'),
    },
    {
      path: '/AboutView',
      name: 'About',
      component: () => import('../Views/AboutView.vue'),
    },
    ]
});

export default router;

3. 检查HeaderComponent.vue中的路由跳转链接，确保使用to="/questionnaire"，示例：

<router-link to="/questionnaire">进入问卷</router-link>

问题2：子组件Questionnaire无法显示 #

原因 #

核心原因是路由未匹配到对应视图组件（QuestionnaireView.vue），RouterView未渲染该视图，导致子组件无法加载。此外视图组件存在路径引入错误，虽不直接导致子组件不显示，但会引发其他问题。

解决步骤 #

1. 访问正确的路由路径/questionnaire，此时RouterView会渲染QuestionnaireView.vue，子组件即可加载；
2. 修正视图组件中HeaderComponent的引入路径：
   原路径../HeaderComponent.vue错误，正确路径应为../components/HeaderComponent.vue（HeaderComponent.vue在components文件夹，视图组件在Views文件夹，两者同级）。

修改后的视图组件代码：

<script setup>
import Questionnaire from '../components/Questionnaire.vue'
// 修正HeaderComponent的引入路径
import HeaderComponent from '../components/HeaderComponent.vue';
</script>

<template>
    <main>
        <Questionnaire />
    </main>
</template>

3. 可选优化：Vue组件模板建议使用短横线命名法（如<questionnaire />），与组件引入的大驼峰命名对应，统一规范更易维护。

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