vue：路由配置 meta 的 menu 和 icon

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

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

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

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

首先，我引用的是antd vue 的这套UI。   可以在 computed 中打印出 this.$router 下面的东西，是获取的路由中配置的菜单和 icon。   代码图和代码请看下面文件配置   menu.js 文件配置后代码如下：     <template>     <div class="menu">       <a-menu v-model="current" mode="inline" theme="dark">           <template v-for='route in routes'>               <!-- 一级菜单 -->               <a-menu-item v-if='route.children && route.children.length == 1' :key='route.path'>                 <router-link :to='route.path'>                     <a-icon :type='route.meta.icon' />                     {{ route.meta.title }}                 </router-link>               </a-menu-item>                 <!-- 二级菜单 -->               <a-sub-menu v-else='route.children && route.children.length == 2' key="sub1">                 <span slot="title"><span><a-icon :type='route.meta.icon' />{{ route.meta.title}}</span></span>                 <a-menu-item v-for='item in route.children' :key='item.path'>                     <!-- <router-link :to='resolve(route.path,item.path)'> -->                     <router-link :to="`${route.path}/${item.path}`">                         <a-icon :type='item.meta.icon' />                         {{ item.meta.title }}                     </router-link>                 </a-menu-item>               </a-sub-menu>           </template>       </a-menu>     </div> </template>   <script>   export default {     name: 'Menu',     data() {       return {           current: ['/'],       }     },     computed: { // 计算属性：获取路由         routes() {             console.log('test', this.$router)             console.log('ddd', this.$router.options.routes)             return this.$router.options.routes         },     },     methods:{         resolve(p,i){           return `${p}/${i}`         },     }, } </script> 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"),         }]     },   ] })