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'] }
      }
    ]
  },

面包屑模板如下：

<template>
  <el-breadcrumb class="app-breadcrumb" separator="/">
    <transition-group name="breadcrumb">
      <el-breadcrumb-item v-for="(item,index) in levelList" v-if="item.meta.title" :key="item.path">
        <span v-if="item.redirect==='noredirect'||index==levelList.length-1"
              class="no-redirect">{{ item.meta.title }}</span>
        <router-link v-else :to="item.redirect||item.path">{{ item.meta.title }}</router-link>
      </el-breadcrumb-item>
    </transition-group>
  </el-breadcrumb>
</template>