安装依赖

pnpm install vue-router

创建路由文件

router->index.js

import {createRouter, createWebHistory} from 'vue-router'

const routerHistory = createWebHistory();
const router = createRouter({
    history: routerHistory,
    routes: [
        {
            path: '/',
            redirect: '/home'
        },
        {
            path: '/home',
            component: () => import('../view/home.vue')
        },
        {
            path: '/login',
            component: () => import('../view/login.vue')
        },
    ]
})
export default router

引入路由

main.js引入路由

import {createApp} from 'vue'
import './style.css'
// import 'amfe-flexible'
import './utils/flexible'
import App from './App.vue'
import router from "./router"

createApp(App).use(router).mount('#app')

App.vue修改

<script setup>
</script>
<template>
<!--Vue3组件中的模板结构可以没有根标签-->
  <router-view />
</template>

运行效果页