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
