Vue.js 将vitejs v2添加到Vue v3时路由器不工作

已经为开发服务器使用

webpack

的应用程序现在应该使用

vite

。除了路线外，一切似乎都运转良好（且快速）。这些内容将被忽略，仅呈现

App.vue

的内容

这是

package.json

：

{
“名称”：“模式”，
“版本”：“0.0.0”，
“脚本”：{
“dev”：“vite”
},
“依赖项”：{
“vue”：“^3.0.5”，
“vue路由器”：“^4.0.4”
},
“依赖性”：{
“@vitejs/plugin vue”：“^1.1.4”，
“@vue/compiler sfc”：“^3.0.5”，
“vite”：“^2.0.2”，
“类型脚本”：“~3.9.3”
}
}

中心

index.html

是：

Vite应用程序

在

src/main.ts

中加载

路由器

：

从“vue”导入{createApp}
从“./App.vue”导入应用程序
从“./路由器”导入路由器
createApp（应用程序）.use（路由器）.mount（“#应用程序”）

该路由器在

src/router/index.ts

中定义：

从“vue路由器”导入{createRouter，createWebHistory}
从“@/views/SomePage.vue”导入SomePage
const router=createRouter({
历史记录：createWebHistory（），
路线：[{
路径：'/some'，
名称：“一些”，
组件：SomePage
}]
})
导出默认路由器

（从未显示）src/views/SomePage.vue是：

某些页面上的某些内容。

这是（始终显示的）

App.vue

：

从“./components/HelloWorld.vue”导入HelloWorld

使用此

src/components/HelloWorld.vue

：

{{msg}}

花哨的文字。

从“vue”导入{defineProps}
定义项目({
msg:String
})

我希望http://localhost:3000/some 显示

SomePage.vue

的内容，但无论使用何种路由，仅呈现

App.vue

的内容

---

我在这里缺少的内容以及忽略精细路由的原因的指针非常感谢。

您需要添加路由器视图才能转到路由页面

如果你想让某个页面成为App.vue的一部分，只需

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <router-view />
  <HelloWorld msg="Hello Vue 3 + Vite" />
</template>