vue：路由配置 meta 的 menu 和 icon

首先，我引用的是antd vue 的这套UI。可以在 computed 中打印出 this.$router 下面的东西，是获取的路由中配置的菜单和 icon。代码图和代码请看下面文件配置menu.js 文件配置后代码如下：首先，我引用的是antd vue 的这套UI。可以在 computed 中打印出 this.$router 下面的东西，是获取的路由...

帅帅哥的兜兜

14065人浏览 · 2019-12-18 14:57:36

帅帅哥的兜兜 · 2019-12-18 14:57:36 发布

首先，我引用的是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"),

}]

]

})

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

Vue

echarts堆叠柱状图

Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...