vue-router设置图标 icon

要在 Vue Router 中设置图标 icon，可以使用路由元信息（Route Meta Fields）来实现。

在路由定义中添加 meta 属性，然后在 meta 中添加一个名为 icon 的属性，如下所示：

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home,
    meta: {
      icon: 'home-icon'
    }
  },
  {
    path: '/about',
    name: 'about',
    component: About,
    meta: {
      icon: 'about-icon'
    }
  }
]

然后在你的模板中，可以通过 $route 对象来获取当前路由的元信息，并使用它来设置图标，如下所示：

<template>
  <div>
    <div :class="[$route.meta.icon, 'icon']"></div>
    <router-view></router-view>
  </div>
</template>

<style>
  .home-icon {
    background-image: url('/path/to/home-icon.png');
  }
  .about-icon {
    background-image: url('/path/to/about-icon.png');
  }
  .icon {
    width: 50px;
    height: 50px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
  }
</style>

这里的 $route 是 Vue Router 提供的一个对象，它包含了当前路由的信息，包括路由的 path、name、params、query 等信息，以及我们刚才定义的 meta 属性。在模板中使用 $route.meta.icon 来获取当前路由的 icon 属性，然后通过 CSS 来设置图标的样式。