vue-router 设置elementplus 的icon

在Vue项目中，使用vue-router和Element Plus时，可以通过以下步骤来设置Element Plus的icon： 1. **安装Element Plus和vue-router**： 首先，确保你已经安装了Element Plus和vue-router。如果还没有安装，可以使用以下命令进行安装： ```bash npm install element-plus vue-router@4 ``` 2. **引入Element Plus的icon**： 在你的`main.js`或`main.ts`文件中，引入Element Plus及其icon组件： ```javascript import { createApp } from 'vue'; import App from './App.vue'; import router from './router'; import ElementPlus from 'element-plus'; import 'element-plus/dist/index.css'; import * as ElementPlusIconsVue from '@element-plus/icons-vue'; const app = createApp(App); app.use(ElementPlus); app.use(router); for (const [key, component] of Object.entries(ElementPlusIconsVue)) { app.component(key, component); } app.mount('#app'); ``` 3. **在路由配置中使用icon**： 在你的路由配置文件中（例如`router/index.js`或`router/index.ts`），你可以为每个路由添加一个`meta`字段来指定icon： ```javascript 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, meta: { icon: 'Home' } }, { path: '/about', name: 'About', component: About, meta: { icon: 'Info' } } ]; const router = createRouter({ history: createWebHistory(process.env.BASE_URL), routes }); export default router; ``` 4. **在导航菜单中使用icon**： 在你的导航菜单组件（例如`App.vue`或`components/NavMenu.vue`）中，使用Element Plus的`el-menu`和`el-menu-item`组件，并绑定`meta`中的icon： ```vue <template> <el-menu> <el-menu-item v-for="route in routes" :key="route.path" :index="route.path"> <el-icon><component :is="route.meta.icon" /></el-icon> <span>{{ route.name }}</span> </el-menu-item> </el-menu> </template> <script> import { computed } from 'vue'; import { useRouter, useRoute } from 'vue-router'; export default { setup() { const router = useRouter(); const routes = computed(() => router.getRoutes()); return { routes }; } }; </script> ``` 通过以上步骤，你就可以在Vue项目中使用vue-router和Element Plus的icon了。