github代码地址：https://github.com/956159241/zh-admin/tree/0.0.1
gitee代码地址：https://gitee.com/huafei_1_0/zh-admin/tree/0.0.1/
线上demo地址：http://zhadminvue.iotzzh.com/

第一步：添加vue-router

npm install vue-router@4

第二步：添加router

router/index.ts

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

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    redirect: '/login'
  },
  {
    path: '/login',
    name: 'Login',
    component: () => import(/* webpackChunkName: "login" */'../views/login/Login.vue')
  },
  {
    path: '/dashboard',
    name: 'Dashboard',
    component: () => import(/* webpackChunkName: "dashboard" */'../views/dashboard/Dashboard.vue')
  },
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
});

// 监听路由
router.beforeEach((to, from, next) => {
  next();
});

export default router;

第三步：在main.ts中添加

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

let app = createApp(App);

app.use(router).mount('#app');

这个时候当运行时会有一个报错：process is not defined, 原因是vue3中 process.env 已经被移除了。

第四步：在vite.config.js中添加

import { defineConfig } from 'vite'
// ...
export default defineConfig({
  // ...
  define: {
    'process.env': {}
  }
})

查看结果：

参考地址：
https://next.router.vuejs.org/zh/installation.html
https://blog.csdn.net/henryhu712/article/details/117897998