目录
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
我的代码
<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