Element-plus

<el-menu>组件：在<el-menu>组件上添加了router属性，这样每个<el-menu-item>的index属性会自动映射到对应的路由名称。

举例：

<template>
  <div id="app">
    <el-menu
      default-active="1"
      class="el-menu-vertical-demo"
      router
    >
      <el-menu-item index="/">Home</el-menu-item>
      <el-menu-item index="/about">About</el-menu-item>
    </el-menu>
    <router-view></router-view>
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import { ElMenu, ElMenuItem } from 'element-plus';

export default defineComponent({
  name: 'App',
  components: {
    ElMenu,
    ElMenuItem
  }
});
</script>

<style>
@import 'element-plus/lib/theme-chalk/index.css';

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

.el-menu-vertical-demo {
  width: 200px;
  height: 100vh;
  display: inline-block;
  vertical-align: top;
}
</style>
 

在 src/router/index.js 中配置你的路由：

import { createRouter, createWebHistory } from 'vue-router';
import Home from '@/views/Home.vue';
import About from '@/views/About.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
];

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

export default router;
 

Icon 图标 

使用前先在script中写入引用

import { Plus} from '@element-plus/icons-vue'

这里用的是Plus图标，其他同理