Problem with defining templates in vue.js single page frontend app

Question

I've got a problem with defining templates(home, partlists, schematichs) for may single page application. I tried to adds some imports but then it also throws error.

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')

Answer 1

At least on this code, you didn't imported any component. Assuming your components are placed at 'components' folder, this should do:

import home from '@/components/home'
import partlists from '@/components/partlists'
import schematics from '@/components/schematics'

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')