面包屑是基于路由的。这里我们要说一下meta(元数据)
自定义元数据,也就是一些我们自己要使用的一些数据。如下那我们在meta中添加了 title和icon属性,分别用于我们面包屑的文字和 导航栏的图标。
meta: { title:'用户管理',icon: 'User' },
import ManageLayout from '@/layout/ManageLayout.vue'
import { RouterView } from 'vue-router'
const manageRouter = // 管理端
{
path:'/manage/',
component : ManageLayout,
children:[
{
path:'',
name:'home',
component:()=>import('@/manage/Home/Home.vue'),
meta: { title: '首页', icon: 'HomeFilled' },
},
{
path:'/user',
name:'user',
component:RouterView,
meta: { title:'用户管理',icon: 'User' },
children:[
{
path:'blacklist',
name:'blacklist',
component:()=>import('@/manage/UserManage/BlackList/BlackList.vue'),
meta: { title:'黑名单管理'},
}
]
},
{
path:'/dashboard',
name:'dashboard',
component:RouterView,
meta: { title:'数据看板',icon: 'TrendCharts'},
children:[
{
path:'pv',
name:'pv',
component:()=>import('@/manage/DashBoard/PV/PV.vue'),
meta: { title:'浏览量'},
}
]
}
]
}
export default manageRouter
注意一下我这里是在另一个路由文件中引入的上面路由,正常的路由配置是:数组中包着对象。
const routes: RouteRecordRaw[] = [
// 是空时代理到client
{
path: '',
redirect:'/client'
},
// 管理端
manageRouter,
// 客户端
clientRouter,
];
如下官方文档中,有两种面包屑。一个是基础的,一个是添加图标分割的。
传入separator="/"
配置项,面包屑就会按照/
进行分隔。
<template>
<el-breadcrumb separator="/">
<el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
<el-breadcrumb-item
><a href="/">promotion management</a></el-breadcrumb-item
>
<el-breadcrumb-item>promotion list</el-breadcrumb-item>
<el-breadcrumb-item>promotion detail</el-breadcrumb-item>
</el-breadcrumb>
</template>
将separator="/"
配置项换为 :separator-icon
配置项。然后将图标组件传入,这里是动态的所以需要:
<template>
<el-breadcrumb :separator-icon="ArrowRight">
<el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
<el-breadcrumb-item>promotion management</el-breadcrumb-item>
<el-breadcrumb-item>promotion list</el-breadcrumb-item>
<el-breadcrumb-item>promotion detail</el-breadcrumb-item>
</el-breadcrumb>
</template>
<script lang="ts" setup>
import { ArrowRight } from '@element-plus/icons-vue'
</script>
Breadcrumb.vue
把elementplus的代码复制过来。然后在我们导航栏文件中引入这个组件。
<template>
<el-breadcrumb :separator-icon="ArrowRight" class="bread">
<el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
<el-breadcrumb-item>promotion management</el-breadcrumb-item>
<el-breadcrumb-item>promotion list</el-breadcrumb-item>
<el-breadcrumb-item>promotion detail</el-breadcrumb-item>
</el-breadcrumb>
</template>
<script lang="ts" setup>
import { ArrowRight } from '@element-plus/icons-vue'
</script>
<style>
/* 这里为了跟收起图标对其 */
.bread{
margin-top:8px;
}
</style>
先看一下效果。
需要使用useRouter() Hook来获取。此时的这个router是经过ref()处理过的响应式数据。所以获取他的值需要.value
,.match
是当前路由的匹配记录。
<template>
<el-breadcrumb :separator-icon="ArrowRight" class="bread">
<el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
<el-breadcrumb-item>promotion management</el-breadcrumb-item>
<el-breadcrumb-item>promotion list</el-breadcrumb-item>
<el-breadcrumb-item>promotion detail</el-breadcrumb-item>
</el-breadcrumb>
</template>
<script lang="ts" setup>
import { useRouter } from "vue-router";
import { ArrowRight } from '@element-plus/icons-vue'
const router = useRouter()
// 当前路由的匹配记录
console.log(router.currentRoute.value.matched)
</script>
<style>
/* 这里为了跟收起图标对其 */
.bread{
margin-top:8px;
}
</style>
我们看一下打印的结果
<script lang="ts" setup>
import { useRouter } from "vue-router";
import { ArrowRight } from '@element-plus/icons-vue'
import { computed } from "vue";
const router = useRouter()
// 当前路由的匹配记录
console.log(router.currentRoute.value.matched)
const routers = computed(()=>{
// 过滤掉没有meta的
return router.currentRoute.value.matched.filter(item=>item.meta.title)
})
</script>
复制代码
<template>
<el-breadcrumb :separator-icon="ArrowRight" class="bread">
<el-breadcrumb-item v-for="item in routers" :key="item.path" :to="{ path: item?.path }">
{{item?.meta?.title}}
</el-breadcrumb-item>
</el-breadcrumb>
</template>
最终效果
我们看一下,路由元数据的TypeScript。就是进行了一下数据类型的约束
主要这个文件所在层级哦!
在src文件下,新建一个 router.d.ts
(这个文件名可以随便起)。但是最好规范成xx.d
。 📢最后的.ts
文件后缀格式 可一定得是 .ts
通过扩展 RouteMeta
来修改meta的数据类型约束。我们添加了title和icon都是字符串类型。
// typings.d.ts or router.ts
import 'vue-router'
declare module 'vue-router' {
interface RouteMeta {
title:string,
icon:string
}
}
这是meta.
之后,会给我们提示 title
并且鼠标悬停在上面也会有相应的提示