1.应用场景
首先这里我要先讲解一个路由对象中的meta属性
在定义路由时，可以补充定义meta属性，它的值是一个对象，用来保存本路由对象的额外信息
①定义格式如下：
路由属性配置
一旦定义完成，就可以在vue调试工具中查看
②使用格式： this.$route.meta.属性1
2.icon以及title是如何配置的
在 meta 属性中定义 icon 和 title 属性，其中icon的值的定义就涉及到了svg图标的使用 ，首先看一看这两个额外属性被赋值的原理，如下图：
配置title以及icon
上面的代码中onlyOneChild就是当前路由中的子路由对象， 给item组件传入了两个属性: icon和title
左侧菜单的文字读取的是meta属性的title属性
左侧菜单的图标读取的是meta属性的icon属性，meta的icon属性名匹配src/icons/svg目录下的svg图标名称即可显示图标
3.操作步骤
1.准备svg 图片。将拷贝过来的svg 图片放到 src/icons/svg 目录下
2.修改菜单中的icon名字
使用实例
注意：
① .svg是一种通过代码的方式来展示的图片格式（.png, .gif.....），学习网站：https://www.runoob.com/svg/svg-tutorial.html
②使用时不需要加任何后缀修饰以及路径等，只写名字
网友评论