Vue.js单页前端应用中模板定义问题求助

1. 先把组件导入做对 #

不管是用单文件组件还是JS定义的组件，必须确保导入路径和导出方式匹配：

• 单文件组件默认导出的情况：

import Home from './components/Home.vue'
import Partlists from './components/Partlists.vue'
import Schematics from './components/Schematics.vue'

• 要是组件是从统一入口导出的命名模块：

import { Home, Partlists, Schematics } from './components/index.js'

2. 别忽略大小写问题 #

大部分项目的打包工具（Vite/Webpack）对文件名大小写敏感，比如home.vue和Home.vue是两个文件，路由里的组件变量名要和导入的完全一致，别写成小写的home，要和导入的Home对应：

const routes=[
    {path:'/home',component: Home},
    {path:'/partlist',component: Partlists},
    {path:'/schematic',component: Schematics}
]

3. 确认组件本身没问题 #

打开你的Home.vue、Partlists.vue这些文件，确保是标准的Vue组件格式，比如：

<template>
  <div>这是首页</div>
</template>

<script>
export default {
  name: 'Home'
}
</script>

要是用Composition API，也得保证导出正确，别漏了export default。

4. 路由注册顺序别搞反 #

必须先导入组件、定义路由数组，再创建路由实例，最后挂载到app上，别把组件导入放在路由定义之后。

完整可运行示例代码 #

// 先导入组件
import Home from './components/Home.vue'
import Partlists from './components/Partlists.vue'
import Schematics from './components/Schematics.vue'

// 定义路由
const routes=[
    {path:'/home',component: Home},
    {path:'/partlist',component: Partlists},
    {path:'/schematic',component: Schematics}
]

// 创建路由实例
const router= VueRouter.createRouter({
    history: VueRouter.createWebHashHistory(),
    routes,
})

// 挂载应用
const app = Vue.createApp({})
app.use(router)
app.mount('#app')

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