vue如何使用面包屑和动态导航（配置路由中获取）

面包屑

如图所示：是在element中获取的面包屑组件，功能如图所示

路由meta路由记录/路由元信息。给每个路由添加一个自定义的meta对象，在meta对象中可以设置一些状态，来进行一些操作，供页面组件或者路由钩子函数中使用。

在路由中配置meta对象存储信息，供当前配置的路由使用

 path: '/home',
    name: 'home',
    meta:{
      arr:[
         {text:"用户信息", icon:"el-icon-user-solid",linto:"/home/map"},
         {text:"数据展示", icon:"el-icon-phone",linto:"/home/shuju"},
         {text:"map成像", icon:"el-icon-info",linto:"/home/yonghu"},
         {text:"加油！", icon:"el-icon-s-comment",linto:""}
      ]
    },
    component: () => import('../components/home.vue'),
    children:[
        {
          path: 'map',
          name: 'map',
          meta:{
            arr:["首页","用户信息"]
          },
          component: () => import('../views/erlu/map.vue'),
        },
        {
          path: 'shuju',
          name: 'shuju',
          meta:{
            arr:["首页","数据展示"]
          },
          component: () => import('../views/erlu/shuju.vue'),
        },
        {
          path: 'yonghu',
          name: 'yonghu',
          meta:{
            arr:["首页","map成像"]
          },
          component: () => import('../views/erlu/yonghu.vue'),
        }
    ]
  },

上图代码是配置meta 的示例
在组件中获取当前meta的数据

//vm层获取
this.$route.meta.xxx
//vive层获取
$route.meta.xxx

在页面中获取配置路由所有的信息

//视图层获取
$router.options.routes
//vm层获取
this.$router.options.routes

那么就可以根据路由信息动态创建 页面中的导航

<router-link :to="v.linto" v-for="(v,i) in $router.options.routes[0].meta.arr" :key="i">
          
                <el-submenu index="1">
                  <template slot="title">
                    <i :class="v.icon"></i>
                    <span>{{v.text}}</span>
                  </template>
                </el-submenu>

    </router-link>

$router.options.routes[0].meta.arr 循环这个可以精准的获取到 要遍历的其中一个配置路由meta的数据，这样就可以展示在页面中了。