el-breadcrumb-item
- el-breadcrumb: Breadcrumb navigation container, separator controls the dividing line in the breadcrumb navigation text
- el-breadcrumb-item: Breadcrumb sub-item, you can use the to attribute to switch routes, and the slot can contain a tag to jump to the external link
<el-breadcrumb separator="/"> //导航分割线
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item> // a标签会刷新
<el-breadcrumb-item>活动列表</el-breadcrumb-item> // 后面俩个是不能点击
<el-breadcrumb-item>活动详情</el-breadcrumb-item>
</el-breadcrumb>
The difference between using the to attribute and the a tag to switch routes is: the to attribute switch route is to dynamically replace the route content in App.vue, while the a tag switch route will refresh the page
We can demonstrate this by looking at the request in the Network, using the to attribute will not send a network request
Routing and Breadcrumb Mapping
The biggest difficulty of breadcrumb navigation is how to map routing and breadcrumb navigation. Let's take a look at how vue-element-admin implements:
Generate Breadcrumbs
getBreadcrumb() {
let matched = this.$route.matched.filter(item => item.meta && item.meta.title)
const first = matched[0]
if (!this.isDashboard(first)) {
matched = [{
path: '/dashboard', meta: {
title: 'Dashboard' }}].concat(matched)
}
this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
}
The logic implemented by the breadcrumb navigation is as follows:
- Get this.$route.matched and filter items that do not contain item.meta.title to generate a new breadcrumb navigation array matched
- Determine whether the first matched item is dashboard, if not, add dashboard as the first item of breadcrumb navigation
- Filter items with empty item.meta.title and item.meta.breadcrumb in matched again
The key here is the this.$route.matched attribute, which is an array that records the matching process of the route, which is the basis of breadcrumb navigation
isDashboard is implemented as follows:
isDashboard(route) {
const name = route && route.name
if (!name) {
return false
}
return name.trim().toLocaleLowerCase() === 'Dashboard'.toLocaleLowerCase()
}
Render breadcrumbs
Breadcrumb navigation template source code:
<el-breadcrumb class="app-breadcrumb" separator="/">
<transition-group name="breadcrumb">
<el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
<span v-if="item.redirect==='noRedirect'||index==levelList.length-1" class="no-redirect">{
{
item.meta.title }}</span>
<a v-else @click.prevent="handleLink(item)">{
{
item.meta.title }}</a>
</el-breadcrumb-item>
</transition-group>
</el-breadcrumb>
A judgment is made in el-breadcrumb-item. If it is the last element or the redirect attribute of the route is specified as noRedirect, no link will be generated. Otherwise, the a tag will be used to generate the link, but @click.prevent is used here to prevent the default a The label event is triggered, and the custom handleLink method is used to handle the routing jump. The source code of the handleLink method is as follows:
handleLink(item) {
const {
redirect, path } = item
if (redirect) {
this.$router.push(redirect)
return
}
this.$router.push(this.pathCompile(path))
}
The pathCompile here is used to solve the matching problem of dynamic routing
Vue admin
login process
interface simplification and routing processing (permission control is realized)
routing and permission verification principle
sidebar
redirection
breadcrumb navigation
requst library axios interception
login component implementation details