Vue的根路径为什么不能作为跳板跳转到其他页面(问题诊断及方案)

const router = createRouter({
  routes: [
    {
      path: "/",
      component: () => import("@/App.vue") // ❌ 错误：App.vue 不应该作为路由组件
    }
  ]
})

<!-- ❌ 错误示例：App.vue -->
<template>
  <Home /> <!-- 直接渲染组件，绕过路由系统 -->
</template>

// router/index.js
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: "/",
      name: "home",
      component: () => import("@/views/Home.vue") // ✅ 指向实际页面组件
    },
    // 其他路由...
  ]
})

<!-- App.vue -->
<template>
  <!-- 全局导航栏等公共元素 -->
  <nav>...</nav>
  <!-- 路由出口 -->
  <router-view /> <!-- ✅ 核心：路由内容在此渲染 -->
</template>

<!-- views/Home.vue -->
<script setup>
import { useRoute } from 'vue-router'
const route = useRoute()
// ✅ 正确获取参数
console.log('Token:', route.query.token) 
</script>

// router/index.js
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: "/",
      name: "home",
      component: () => import("@/views/Home.vue") // 实际页面组件
    },
    {
      path: "/about",
      name: "about",
      component: () => import("@/views/About.vue")
    }
  ]
})

// 在页面组件中调试
console.log('完整路由信息:', route)

routes: [
  { path: '/', component: Home },
  // ...其他路由
  { path: '/:pathMatch(.*)*', component: NotFound } // ✅ 最后定义
]