vue路由中meta的作用


meta简单来说就是路由元信息,也就是每个路由身上携带的信息。

当我们做面包屑功能时,会用到meta。

面包屑效果如下:

router/index.js中代码如下:

{
    path: '/backstage',
    component: Layout,
    redirect: '/backstage/menu',
    name: '后台管理',
    meta: { title: '后台管理', icon: 'example', code: 'backstage@table', roles: ['admin'] },
    children: [
      {
        path: 'menu',
        name: '菜单管理',
        component: () => import('@/views/backstage/menu/index'),
        meta: { title: '菜单管理', icon: 'table', code: 'backstage@menu@index', roles: ['admin'] }
      }
    ]
  },

面包屑模板如下: