使用导航栏时Vue组件无法渲染的问题求助

我在实现网站导航栏时遇到问题：使用<router-view>时，Signup、Home等组件无法渲染，仅显示空白页面（导航栏正常显示），但URL能正确跳转到对应地址（如http://localhost:8080/signup）。即使在组件模板中添加测试文本也无法显示，但直接在App.vue模板中导入组件可正常渲染，只有用<router-view>作为占位符时无法正常渲染对应组件。

项目相关代码 #

Router/index.js #

import { createRouter, createWebHistory } from 'vue-router';
import HomePage from '@/components/HomePage.vue';
import UserSignup from '@/components/UserSignup.vue';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      name: 'HomePage',
      component: HomePage
    },
    {
      path: '/signup',
      name: 'UserSignup',
      component: UserSignup
    }
  ]
})

export default router

App.vue #

<template>
  <div id="app">
    <NavBar />
    <router-view />
  </div>
</template>

<script>
import NavBar from './components/NavBar.vue'

export default {
  name: 'App',
  components: { NavBar },
}
</script>

main.js #

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

UserSignup.vue #

<template>
  <div class="signup-container">
    <h1>Sign Up</h1>
    <form @submit.prevent="handleSubmit">
      <div class="form-group">
        <label for="username">Username</label>
        <input type="text" id="username" v-model="username" required>
      </div>
      <div class="form-group">
        <label for="password">Password</label>
        <input type="password" id="password" v-model="password" required>
      </div>
      <button type="submit">Sign Up</button>
    </form>
  </div>
</template>

<script>
  import axios from 'axios';

  export default {
    name: 'UserSignup',
    data() {
      return {
        username: '',
        password: ''
      };
    },
    methods: {
      handleSubmit() {
        const userData = {
          username: this.username,
          password: this.password
        };
        axios.post('http://127.0.0.1:8000/accounts/signup/', userData)
          .then(response => {
            console.log(response.data);
          })
          .catch(error => {
            console.error(error);
          });
      }
    }
  };
</script>

<style scoped> 
/* Some styling */
</style>

components/NavBar.vue #

<template>
    <nav class="navbar">
      <router-link to="/">Home</router-link>
      <router-link to="/signup">Signup</router-link>
      <span class="inactive-link">Login</span> <!-- Not clickable for now -->
    </nav>
</template>
  
<script>
    export default {
        name: 'NavBar'
    };
</script>

<style scoped> 
/* Some styling */
</style>

项目目录结构截图 #

排查方向与解决方案 #

• 检查HomePage组件内容：目前未提供HomePage组件代码，若该组件模板为空，会导致根路径访问时<router-view>显示空白。先给HomePage添加基础测试内容验证：

  <template>
    <div>首页测试内容</div>
  </template>
  

• 验证路由导入路径：尝试将@别名替换为相对路径测试，确认路径配置是否正确：

  import HomePage from '../components/HomePage.vue';
  import UserSignup from '../components/UserSignup.vue';
  

• 检查Vue Router版本：Vue 3必须搭配vue-router@4.x版本，执行npm list vue-router查看版本，若不匹配则重新安装：npm install vue-router@4

• 查看浏览器控制台报错：打开F12开发者工具，检查Console面板是否有组件加载失败、路由配置错误等提示，根据报错信息定位问题。

• 确认路由实例注入：在App.vue中添加代码验证路由是否成功注入：

  import { useRouter } from 'vue-router';
  export default {
    setup() {
      const router = useRouter();
      console.log(router); // 控制台应打印路由实例，而非undefined
    }
  }
  

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