vue：路由配置 meta 的 menu 和 icon

最新推荐文章于 2025-06-10 09:02:41 发布

帅帅哥的兜兜

最新推荐文章于 2025-06-10 09:02:41 发布

阅读量1.4w

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： antd 菜单路由meta vue菜单

本文链接：https://blog.csdn.net/u013592575/article/details/103519949

vue 专栏收录该内容

19 篇文章

订阅专栏

本文介绍如何使用AntdVue UI库结合Vue Router实现菜单的动态加载和路由配置。通过计算属性获取路由信息，展示一级和二级菜单，包括菜单标题和图标。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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

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

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

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

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

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

<a-menu v-model="current" mode="inline" theme="dark">

<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' />

</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="`${route.path}/${item.path}`">

<a-icon :type='item.meta.icon' />

</router-link>

</a-menu-item>

</a-sub-menu>

</template>

</a-menu>

</div>

</template>

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"),

}]

]

})