使用elementUI框架做面包屑的步骤

目录

1.下载element框架

2.在element.js文件夹里面引用组件 

3.去官方网站复制代码

4.处理路由格式 map

---

1.下载element框架

npm i element-ui -S 

生成了一个文件夹

2.在element.js文件夹里面引用组件 

import Vue from 'vue'
import {
    Breadcrumb,
    BreadcrumbItem
} from 'element-ui'
// 注册 首字母大写 使用驼峰命名
// 在html使用直接引入
Vue.use(Breadcrumb)
Vue.use(BreadcrumbItem)

3.去官方网站复制代码 Element - The world's most popular Vue UI framework

扫描二维码关注公众号，回复： 14704343 查看本文章

 我的代码

<template>
    <div class="container">
        <div class="top">
            <el-button v-if="show" type="primary" icon="el-icon-s-fold" @click="isshow"></el-button>
            <el-button v-else type="primary" icon="el-icon-s-unfold" @click="isshow"></el-button>
            <el-breadcrumb separator="/" class="list">
                <el-breadcrumb-item v-for="item, index in menuData" :key="index" :to="{ path: 'item.path' }">
                    {
   
   { item }}
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
    </div>
</template>

 监听路由变化

watch: {
        $route: {
            immediate: true,
            handler(val, oldval) {
                console.log(this.$route.meta.title);
                this.menuData = this.$route.meta.title
            }
        }
    },

4.处理路由格式 map

写路由守卫里面 ，主要是生成meta添加title内容进去方便页面获取

// 生成用户访问的路由数据
    let newChildrenRoutes = []
    // 子路由遍历
    GetRouterApis.data.forEach((item) => {
      let set = item.children.map(item2 => {
        return {
          path: item.path + "/" + item2.path,
          meta: {
            title: [item.meta.title, item2.meta.title]
          },
          component: () => import(`../views${item.path}/${item2.name}.vue`)
        }
      })
      newChildrenRoutes = [...newChildrenRoutes, ...set]
    })
    console.log(newChildrenRoutes);
    // 把路由添加进去
    newChildrenRoutes.forEach(item => {
      // router.addRoute("父路由名称", 单个子路由名称)
      router.addRoute("home", item)
    })
    // 如果直接next()路由还没有完成，是空的，要加to.path 会重新执行一次 路由就有了
    next(to.path)
    return