1.组件内容
<template>
<div class="breadcumb">
<ul>
<li v-for="(v, i) in data.list" :key="i" :class="i + 1 == data.list.length ? 'textactive' : 'text'">
<span @click="todo(v, i)">{{ v.meta.title }}</span>
<span v-if="i < data.list.length - 1"
><el-icon><ArrowRight /></el-icon>
</span>
</li>
</ul>
</div>
</template>
<script setup name="bread">
import { ArrowRight } from '@element-plus/icons-vue';
const route = useRoute();
const router = useRouter();
const data = ref({
list: [],
});
onMounted(() => {
let matched = [...route.matched];
data.value.list = unique(matched);
console.log(data.value.list);
});
function todo(e, i) {
if (data.value.lists.length == 2) {
router.push(e.path);
} else if (i != 0) {
router.push(e.path);
}
}
//去重
function unique(arr) {
for (var i = 0; i < arr.length; i++) {
for (var j = i + 1; j < arr.length; j++) {
if (arr[i].meta.title == arr[j].meta.title) {
arr.splice(j, 1);
j--;
}
}
}
return arr;
}
</script>
<style lang="scss" scoped>
.text {
font-size: 15px;
font-family: Microsoft YaHei UI, Microsoft YaHei UI-Regular;
font-weight: 400;
text-align: LEFT;
color: #b0b1b2 !important;
line-height: 48px;
}
.textactive {
font-size: 15px;
font-family: Microsoft YaHei UI, Microsoft YaHei UI-Regular;
font-weight: 400;
text-align: LEFT;
color: #616466 !important;
line-height: 48px;
}
.breadcumb {
display: flex;
align-items: center;
margin-left: 15px;
span {
cursor: pointer;
}
.el-icon-arrow-left {
margin-right: 10px;
}
ul {
display: flex;
align-items: center;
a {
&:hover {
cursor: pointer;
}
}
}
}
</style>
2.路由结构
import homeindex from '@/views/layout/index.vue';
const routes = [
{
path: '/',
name: 'index',
redirect: '/home',
meta: {
title: '首页',
isnav: false,
},
},
{
path: '/home',
name: 'home',
component: homeindex,
redirect: '/home',
meta: {
title: '首页',
isnav: true,
},
children: [
{
path: '/home',
component: () => import('@/views/home/index.vue'),
meta: {
title: '首页',
isnav: true,
},
},
],
},
{
path: '/adminmanage',
name: 'adminmanage',
component: homeindex,
redirect: '/adminmanage',
meta: {
title: '局端用户管理',
isnav: true,
roles: ['admin'],
},
children: [
{
path: '/adminmanage',
component: () => import('@/views/usermanage/admin.vue'),
meta: {
title: '局端用户管理',
roles: ['admin'],
},
},
],
},
{
path: '/schoolmanage',
name: 'schoolmanage',
component: homeindex,
redirect: '/schoolmanage',
meta: {
title: '校端用户管理',
isnav: true,
roles: ['school'],
},
children: [
{
path: '/schoolmanage',
component: () => import('@/views/usermanage/school.vue'),
meta: {
title: '校端用户管理',
isnav: true,
roles: ['school'],
},
},
],
},
{
path: '/authmanage',
name: 'authmanage',
component: homeindex,
redirect: '/authlist',
meta: {
title: '权限配置',
isnav: true,
roles: ['school', 'admin'],
},
children: [
{
path: '/authlist',
component: () => import('@/views/authmanage/index.vue'),
meta: {
title: '权限类别',
isnav: true,
roles: ['school', 'admin'],
},
},
{
path: '/adminauth',
component: () => import('@/views/authmanage/admin.vue'),
meta: {
title: '局端权限配置',
isnav: true,
roles: ['admin'],
},
},
{
path: '/schoolauth',
component: () => import('@/views/authmanage/school.vue'),
meta: {
title: '校端权限配置',
isnav: true,
roles: ['school'],
},
},
],
},
];
export default routes;