16.左侧导航菜单制作

左侧导航菜单制作

1. 修改路由，方便查看页面

index.ts

import { RouteRecordRaw, createRouter, createWebHistory } from "vue-router";
import Layout from '@/layout/Index.vue'

const routes: Array = [
    {
        path: '/',
        name: 'home',
        component: Layout
    }
]

const router = createRouter({
    history: createWebHistory(),
    routes
})

export default router

2. 官网

https://element-plus.org/zh-CN/component/menu.html

3. 在Layout中新建Menu.vue

3.1代码如下

3.2 效果图

3.3 修改样式

3.4 效果图

4. 在Layout中新建MenuItem.vue

4.1 代码如下

知识点补充

component是vue内置组件，主要作用为动态渲染组件，基本用法如下：

官网：动态组件 & 异步组件 | Vue.js (vueframework.com)

4.2 Menu.vue修改

4.3 在index.vue中引入

5. 最终效果