1.安装router插件npm install vue-router@4或者yarn add vue-router@4
2.新建router文件夹以及router里边的index.js：里边主要配置路由

import {createRouter,createWebHashHistory} from 'vue-router'
// 1.新的页面导入进来
import Home from '../view/Home.vue'
import Login from '../view/Login.vue'
// 2.写路由的地方
const routes = [{path:'/',name:'home',component:Home},{path:'/login',name:'login',component:Login,}
];
const router = createRouter({//  3.内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。history: createWebHashHistory(),routes, // `routes: routes` 的缩写})export default router;

3.在main.js页面里边进行 导入路由 挂载路由

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')

4.测试一下 看路由有没有配置成功 随便创建一个页面里边随便写点东西

这是Home页面

<template><h1>用户页面</h1>
</template><script>
export default {}
</script><style></style>

5.最后一步也是最关键在app页面使用<router-view></router-view>显示子组件的效果
效果图