安装路由

npm install vue-router@4

创建路由器并导出

//导入vue-router
import { createRouter, createWebHistory } from 'vue-router'
//导入组件
import LoginVue from '@/views/Login.vue'
import LayoutVue from '@/views/Layout.vue'

//定义路由关系
const routes = [
    { path: '/login', component: LoginVue },
    { path: '/', component: LayoutVue }
]

//创建路由器
const router = createRouter({
    history: createWebHistory(),
    routes: routes
});

export default router

在main.js中导入vue组件

import router from ‘@/router’

app.use(router)

展示路由在 app.vue中展示路由

<template>
   <router-view></router-view>
</template>

路由API

点击登陆跳转后，页面应该发生对应的变化，这个时候j就应该用到了路由。
导入路由：

import { useRouter } from 'vue-router'
const router = useRouter();

调用API

router.push('/')

点击登陆按钮，路由跳转页面。