vue-router 设置icon

在Vue.js中使用vue-router设置导航菜单的icon，可以通过以下步骤实现：

1. **安装并引入图标库**：首先，你需要选择一个图标库，比如Font Awesome、Element UI的图标或者Vue Material等。这里以Font Awesome为例。

2. **安装Font Awesome**：

npm install --save @fortawesome/fontawesome-free

3. **在项目中引入Font Awesome**：
在`main.js`中引入Font Awesome的CSS文件。

import 'font-awesome/css/font-awesome.min.css';

4. **配置路由**：在`router/index.js`中配置路由时，添加一个自定义的meta字段来存储图标的类名。

import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/components/Home.vue';
import About from '@/components/About.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home,
      meta: { icon: 'fa-home' }
    },
    {
      path: '/about',
      name: 'About',
      component: About,
      meta: { icon: 'fa-info-circle' }
    }
  ]
});

5. **在导航菜单中使用图标**：在你的导航菜单组件中，遍历路由并根据meta字段显示相应的图标。

<template>
  <nav>
    <ul>
      <li v-for="route in routes" :key="route.name">
        <router-link :to="route.path">
          <i :class="`fa ${route.meta.icon}`"></i>
          {{ route.name }}
        </router-link>
      </li>
    </ul>
  </nav>
</template>

<script>
export default {
  computed: {
    routes() {
      return this.$router.options.routes;
    }
  }
};
</script>

<style scoped>
nav ul {
  list-style-type: none;
  padding: 0;
}

nav ul li {
  display: inline;
  margin-right: 10px;
}

nav ul li a {
  text-decoration: none;
  color: #000;
}
</style>

这样，你就可以在Vue.js中使用vue-router设置导航菜单的icon了。