1.在项目src/router/index.ts 文件夹下配置路由：
import { createRouter ,createWebHistory,RouteRecordRaw} from "vue-router";
//1.引入路由//3.routes配置项
const routes:Array<RouteRecordRaw> = [{path:"/", //路径name:"login", //路由名称component:()=>import("../components/login.vue") //组件名，此处懒加载方式},{path:"/reg",name:"reg",component:()=>import("../components/reg.vue")},
]//2.创建路由，写入路由配置项
const router = createRouter({history:createWebHistory(), //路由模式routes //路由配置项})//4.导出路由
export default router;2.在main.ts入口文件中使用路由：
import router from './router/index'
//引入路由//使用路由:用use方法串联createApp之后
createApp(App).use(router).mount('#app')3.最后在app.vue中写入标签即可（router-view作用：显示与 url 对应的组件）：
<template><div><h1>hello</h1></div><!--router-link进行导航,默认将router-link当成a标签进行渲染--><router-link to="/" style="margin-right: 20px;" tag="div">Login</router-link><router-link to="/reg" tag="div">Reg</router-link><!-- router-view作用：根据网页url不同，展示不同内容给用户 --><router-view></router-view>
</template>完成以上3步骤后，在页面中输入对应的path路径就会显示对应的组件
