我用了element图标的自动导入，所以在使用的时候要用但是现在xx我要在路由中获取，请问获取到之后要怎么拼接上去才能显示图标

Question

我用了element图标的自动导入，所以在使用的时候要用但是现在xx我要在路由中获取，请问获取到之后要怎么拼接上去才能显示图标，感谢

Answer 1

阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

解答

你使用了 ElementUI 的自动导入，想要在路由中获取图标，然后拼接到 HTML 中显示。

可以使用 Vue 的 $root 或 $parent 属性来获取当前组件的根元素，然后使用 innerHTML 属性来拼接图标。

例如：

<template>
  <div @click="handleClick">
    {{ icon }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      icon: ''
    }
  },
  mounted() {
    // 获取路由中的图标
    const icon = this.$route.meta.icon
    // 拼接图标
    this.icon = `<i class="${icon}"></i>`
  },
  methods: {
    handleClick() {
      console.log('点击了图标')
    }
  }
}
</script>

在上面的代码中，我们使用 this.$route.meta.icon 来获取路由中的图标，然后使用 innerHTML 属性来拼接图标。

如果你想要在路由中获取图标，可以在路由配置中添加 meta 属性，例如：

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

然后，在组件中可以使用 this.$route.meta.icon 来获取图标。

希望这可以帮助你解决问题！