1、npm install vue-router 引入vue-router
main.ts增加配置
import router from './routes'
createApp(App).use(router)
2、src下新建目录routes,新建index.ts
// index.ts
import { createRouter, createWebHistory } from 'vue-router';
// 引入Vue组件
import Home from '../page/Home.vue';
import HelloWorld from '../components/HelloWorld.vue';
// 定义路由
const routes = [
{
path: '/', name: 'Home', component: Home,
children: [
{ path: '/children', name: 'HelloWorld', component: HelloWorld }
]
},
];
// 创建router实例
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
3、src新建page文件夹,新建Home.vue
到这里项目的基础架构就建立起来了,接下来就是封装el-menu一样,对element-plus进行二次封装。