vue：路由配置 meta 的 menu 和 icon

首先，我引用的是antd vue 的这套UI。

可以在 computed 中打印出 this.$router 下面的东西，是获取的路由中配置的菜单和 icon。

代码图和代码请看下面文件配置

menu.js 文件配置后代码如下：

首先，我引用的是antd vue 的这套UI。   可以在 computed 中打印出 this.$router 下面的东西，是获取的路由中配置的菜单和 icon。   代码图和代码请看下面文件配置   menu.js 文件配置后代码如下：   Router.js 文件配置：   import Vue from 'vue'; import Router from 'vue-router'; import HelloWorld from '@/components/HelloWorld'; Vue.use(Router);   // 引入的页面布局（头、菜单、内容、底部） // import Layout from '../layout/index.vue'; import Layout from '@/layout';   export default new Router({   routes: [       {           path: '/',           component: Layout,           meta: { title: '首页', icon: 'home'}, // 路由元:{ 标题，icon 图标 }           children: [{                 path: '/',                 component: () => import( "@/views/Home.vue"),           }]       },       {         path: '/basic',         component: Layout,         meta: { title: '基础', icon: 'desktop' },         children: [             {                 path: 'helloworld',                 component: HelloWorld,                 meta: { title: '链接', icon: 'link' }             },             {                 path: 'instruction',                 component: () => import('@/views/Instruction.vue'),                 meta: { title: '指令', icon: 'code' }             },             {                 path: 'cycle',                 component: () => import('@/views/Cycle.vue'),                 meta: { title: '钩子函数', icon: 'heart' }             }         ]     },     {         path: '/echart',         component: Layout,         meta: { title: 'Echart',icon: 'bar-chart' },         children: [{           path: '/echart',           component: () => import( "@/views/Echart.vue"),         }]     },     {         path: '/table',         component: Layout,         meta: { title: 'Table', icon: 'table' },         children: [{           path: '/table',           component: () => import( "@/views/Table.vue"),         }]     },   ] })

Router.js 文件配置：

 

import Vue from 'vue'; import Router from 'vue-router'; import HelloWorld from '@/components/HelloWorld'; Vue.use(Router);   // 引入的页面布局（头、菜单、内容、底部） // import Layout from '../layout/index.vue'; import Layout from '@/layout';   export default new Router({   routes: [       {           path: '/',           component: Layout,           meta: { title: '首页', icon: 'home'}, // 路由元:{ 标题，icon 图标 }           children: [{                 path: '/',                 component: () => import( "@/views/Home.vue"),           }]       },       {         path: '/basic',         component: Layout,         meta: { title: '基础', icon: 'desktop' },         children: [             {                 path: 'helloworld',                 component: HelloWorld,                 meta: { title: '链接', icon: 'link' }             },             {                 path: 'instruction',                 component: () => import('@/views/Instruction.vue'),                 meta: { title: '指令', icon: 'code' }             },             {                 path: 'cycle',                 component: () => import('@/views/Cycle.vue'),                 meta: { title: '钩子函数', icon: 'heart' }             }         ]     },     {         path: '/echart',         component: Layout,         meta: { title: 'Echart',icon: 'bar-chart' },         children: [{           path: '/echart',           component: () => import( "@/views/Echart.vue"),         }]     },     {         path: '/table',         component: Layout,         meta: { title: 'Table', icon: 'table' },         children: [{           path: '/table',           component: () => import( "@/views/Table.vue"),         }]     },   ] })