vue实现动态面包屑导航

<template>
	<el-breadcrumb separator="/">
		<transition-group name="breadcrumb">
			<el-breadcrumb-item
				v-for="(item, index) in levelLst"
				:key="item.path"
			>
				<span v-if="item.redirect === 'noRedirect' || index === levelList.length - 1">{
   {
   item.meta.title}]</span>
				<a v-else @click.prevent="handleLink(item)">{
   {
   item.meta.title}}</a>
			</el-breadcrumb-item
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 2中实现面包屑导航栏可以通过以下步骤完成: 1. 创建一个面包屑组件 `Breadcrumb.vue`: ```vue <template> <nav class="breadcrumb"> <ul> <li v-for="(crumb, index) in crumbs" :key="index" :class="{ active: index === crumbs.length - 1 }"> <router-link :to="crumb.path">{{ crumb.label }}</router-link> </li> </ul> </nav> </template> <script> export default { name: 'Breadcrumb', computed: { crumbs() { // 获取当前路由的路径 const routePath = this.$route.path; // 分割路径为数组 const pathSegments = routePath.split('/').filter(segment => segment !== ''); // 构建面包屑导航数据 const crumbs = pathSegments.map((segment, index) => { const path = `/${pathSegments.slice(0, index + 1).join('/')}`; return { path, label: segment }; }); return crumbs; } } }; </script> <style> .breadcrumb { background-color: #f5f5f5; padding: 10px; } .breadcrumb ul { list-style: none; padding: 0; margin: 0; } .breadcrumb li { display: inline-block; } .breadcrumb li:not(:last-child):after { content: '/'; margin: 0 5px; } .breadcrumb li.active { font-weight: bold; } </style> ``` 2. 在需要使用面包屑导航栏的组件中引入并使用 `Breadcrumb` 组件: ```vue <template> <div> <breadcrumb></breadcrumb> <!-- 其他组件内容 --> </div> </template> <script> import Breadcrumb from './Breadcrumb.vue'; export default { name: 'YourComponent', components: { Breadcrumb } }; </script> ``` 上述代码中,面包屑导航栏会根据当前路由的路径动态生成面包屑导航数据,并且只有最后一个路径会被标记为活动状态。你可以根据需要自定义样式和路由配置。希望对你有所帮助!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值