1.安装vue-router

pnpm   i  vue-router 

2.在src下闯将router目录，在它下边再建一个index.ts,用来创建路由和配置静态路由（静态路由就是不管哪个用户都会有的路由页面，比如，登陆页面，主页面，404页面，以及如果匹配到没有的路由重定向到404的配置）

import { createRouter, createWebHashHistory } from 'vue-router'let router = createRouter({history: createWebHashHistory(),routes: [{path: '/login',component: () => import('@/views/login/index.vue'),name: 'login'},{path: '/',component: () => import('@/views/home/index.vue'),name: 'layout'},{path: '/404',component: () => import('@/views/404/index.vue'),name: 'Any'},{path: '/:pathMatch(.*)*',//如果匹配到没有的路由，则重定向到404页面redirect: '/404'}],scrollBehavior() {return {left: 0,top: 0}}
})export default router;

3.再main.ts中引入配置好的路由

import router from '@/router/index'app.use(router)

到这里就配置好了，如果想实现路由跳转，只需要在跳转的父组件的位置写上router-view标签，引入useRouter函数，在引入的最上方获取router对象，通过它的push方法即可实现路由跳转

import {useRouter}  from 'vue-router'let route=useRouter();route.push('/')