Vue中`RouterView`无法渲染组件？路由问题求助

架构老林

2026-7-26

问题排查与修复方案

1. 路由组件文件路径不匹配

你的路由配置中导入的JournalScreen组件路径指向../widgets/journal/journalScreen.vue，但你提供的目标组件文件是journal.vue。路径与实际文件名不匹配会导致路由无法加载正确组件，这是RouterView空白的核心原因之一。

修复：
修改router.ts中的导入路径，与实际文件名保持一致：

// router.ts
import JournalScreen from '../widgets/journal/journal.vue';

2. 生命周期钩子使用错误

在journal.vue的<script setup>中，直接定义function mounted()不会触发组件挂载逻辑。Vue3的<script setup>语法要求必须导入并使用对应的生命周期钩子函数。

修复：

// journal.vue
<script setup lang="ts">
import { onMounted } from 'vue';
// ...其他导入代码

onMounted(() => {
  console.log('here'); // 现在会正常触发挂载日志
});
</script>

3. 组件内路由跳转的不规范用法

在app.vue中直接使用全局router实例调用push，虽然单例场景下可能生效，但不符合Vue3组合式API的规范，且可能引发实例上下文问题。

修复：

// app.vue
<script setup lang="ts">
import { RouterView, useRouter } from 'vue-router';
// 移除无用的router导入和JournalScreen组件导入

const router = useRouter(); // 获取当前组件注入的路由实例
router.push('/journal');
</script>