1.安装路由

pnpm install vue-router

2.配置相应的路由

routes.ts

//对外暴露这些配置的路由(常量路由)

export const constantRoutes = [
    {
        path: '/login',
        name: 'login',//命名路由 权限用到
        component: () => import('@/views/login/LoginPage.vue')
    },
    {
        path: '/',
        name: 'layout',
        component: () => import('@/views/home/HomePage.vue')
    },
    {
        path: '/404',
        name: '404',
        component: () => import('@/views/404/Error404Page.vue')
    },
    {
        path: '/:pathMatch(.*)*',
        // redirect: '/404',
        redirect: { name: '404' },//以名字重定向
        name: 'Any'
    },
]

index.ts

//通过 vue-router 插件 实现模板路由配置
import { createRouter, createWebHistory } from "vue-router";

//创建路由器
import { constantRoutes } from './routes'

const router = createRouter({
    //路由的模式 hash
    history: createWebHistory(),
    routes: constantRoutes,
    //滚动行为
    scrollBehavior() {
        return {
            left: 0,
            top: 0
        }
    }
})

export default router;

main.ts

//引入路由器  在配置文件里创建出来了
import router from './router';
//使用路由器
app.use(router)

检测 App.vue 

<template>
  <div>
      <RouterView></RouterView>
  </div>
</template>

<script setup lang="ts" name="App">

</script>

<style lang="scss" scoped>
</style>

3.登录界面静态页面搭建