安装路由
cnpm i vue-router
在src
文件夹下创建router/index.ts
import {createRouter,createWebHashHistory} from 'vue-router'
const router=createRouter({history:createWebHashHistory(),routes:[{path:"/",name:'home',component: () => import('../views/Home/index.vue')}]
})export default router
在src/main.ts
中导入挂载路由
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router/index'const app = createApp(App)
app.use(router)
app.mount('#app')
在src
文件夹下创建views/Home/index.vue
<template><div>首页</div>
</template><script setup lang="ts">
</script><style lang="less" scoped></style>
在src/App.vue
中设置路由出口,其他内容都删除
<template><div><router-view></router-view></div>
</template><script setup lang='ts'>
import { ref } from "vue" </script><style lang="less" scoped></style>
运行项目直接就会出现首页 路由配置成功