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路径就会显示对应的组件