安装:pnpm add vue-router
在src目录下新建一个router文件夹，再在其中建立一个index.ts文件，里面存储路由的配置信息
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
const routes: Array<RouteRecordRaw> = [
{
path: '/',
component: () => import('../components/login.vue'),
},
{
path: '/reg',
component: () => import('../components/reg.vue'),
},
]
const router = createRouter({
history: createWebHashHistory(),
routes,
})
export default router创建完毕后在main.ts中注册：
import { createApp, toRaw } from 'vue'
import router from './router'
import App from './App.vue'
const app = createApp(App)
app.use(router)
app.mount('#app')
接下来在任意一个组件中定义出口即可，这里使用的是App.vue
<template>
<h1>小满最骚</h1>
<router-link to="/reg">点击此处跳转</router-link>
// 路由出口
<router-view></router-view>
</template>
<script setup lang='ts'>
import { ref,reactive } from 'vue'
</script>
<style scoped>
</style>