后管实现面包屑功能

已于 2022-08-04 15:27:31 修改
阅读量610 收藏 2
点赞数
分类专栏： # Element 文章标签： vue.js
于 2022-08-01 11:03:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_53912016/article/details/126097077
版权 
面包屑实现动态与静态看需求咯
如下所示:

面包屑

one方法 1

面包屑点击title显示进行替换(不可点击)

面包屑点击title显示进行替换(不可点击)
这种根据路由的meta值来判断

涉及2个页面
1 router.js
2 面包屑独立文件

效果图

在这里插入图片描述

router.js

在这里插入图片描述

在这里的name下都要加入
 meta: { title: '' },
面包屑独立文件
直接copy用

!<template>
<!-- 常见的面包屑 -->
  <div>
  <el-breadcrumb eparator="/">
  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
 <el-breadcrumb-item v-for="(item, index) in breadList" :key="index">{{item.meta.title}}</el-breadcrumb-item>
</el-breadcrumb>
  </div>
</template>
<script>
export default {
data(){
  return{
     breadList: []
  }
},
watch:{
  $route(val) {
      this.getBreadcrumb(val);
    }
},
 methods: {
    getBreadcrumb(val) {
      if (val.matched) {
         let matched = val.matched.filter(item => item.meta && item.meta.title);
        this.breadList = matched;
      }
    }
  }
}
</script>
<style>
</style>

two方法 2

面包屑点击title显示进行叠加(可点击)

 面包屑点击title显示进行叠加(可点击)

触及到文件
1 router.js
2 store.js
3 面包屑文件(放在首页里面)
4 侧边栏独立文件

效果图

在这里插入图片描述

router.js
路由文件
这里对应的路由的各个name需要与侧边栏对应写的你name保持一致

在这里插入图片描述

store.js
这个是vuex里使用的文件
这里的是tab.js做了拆分如下所示

在这里插入图片描述

里面内容所示
这里的内容可以直接copy

export default {
    state:{
        tabList:[
            // 拿到首页的数据初始化显示home
            {
                id: 1,
                path: "/index",
                name: "AdminIndex",
                //这里的name值与router的保持一致
                nameZh: "首页",
                icon: "el-icon-menu",
                component: "AdminIndex",
              },
        ],
        currentMenu: null//初始化侧边栏的值为null
    },
    mutations:{
        // 判断选中的值状态
        selectMenu(state,val){
            if(val.name !== 'AdminIndex'){//对应的title的name
                state.currentMenu = val
                // 查找选中的是否索引值一致 进行单个添加
                const result = state.tabList.findIndex(item => item.name === val.name)
                if(result === -1){
                    state.tabList.push(val)
                }
            }else{
                state.collapseMenu = null  
            }
        },
        // 判断关闭的状态
        closeTag(state,val){
            // 查找选中的是否索引值一致 进行单个删除
            const result = state.tabList.findIndex(item => item.name  === val.name )
            state.tabList.splice(result, 1)
        }
    },
}
面包屑文件
//html

   <el-breadcrumb separator="/">
              <el-breadcrumb-item
                v-for="item in tags"
                :key="item.path"
                :to="{ path: item.path }"
                >{{ item.nameZh }}</el-breadcrumb-item>

//js
import { mapState } from "vuex";


  computed: {
    ...mapState({
      tags: (state) => state.tab.tabList,
    }),
  },
就可
侧边栏独立文件
需要在如下所示加入点击事件

在这里插入图片描述

我这里的侧边栏使用递归只需要在子里面加入这个点击事件

在这里插入图片描述

//然后点击事件里面的方法写这种
methods: {
     clickMenu(item) {
       console.log(item)
        this.$router.push({
            name: item.name
        })
        this.$store.commit('selectMenu', item)
    }
  },

three方法 3

面包屑点击title显示进行叠加带删除(可点击)

面包屑点击title显示进行叠加带删除(可点击)

这种根据路由的name相同来判断

触及到文件
1 router.js
2 store.js
3 面包屑独立文件
4 侧边栏独立文件

效果图

在这里插入图片描述

router.js
路由文件
这里对应的路由的各个name需要与侧边栏对应写的你name保持一致

在这里插入图片描述

store.js
这个是vuex里使用的文件
这里的是tab.js做了拆分如下所示

在这里插入图片描述

里面内容所示
这里的内容可以直接copy

export default {
    state:{
        tabList:[
            // 拿到首页的数据初始化显示home
            {
                id: 1,
                path: "/index",
                name: "AdminIndex",
                //这里的name值与router的保持一致
                nameZh: "首页",
                icon: "el-icon-menu",
                component: "AdminIndex",
              },
        ],
        currentMenu: null//初始化侧边栏的值为null
    },
    mutations:{
        // 判断选中的值状态
        selectMenu(state,val){
            if(val.name !== 'AdminIndex'){//对应的title的name
                state.currentMenu = val
                // 查找选中的是否索引值一致 进行单个添加
                const result = state.tabList.findIndex(item => item.name === val.name)
                if(result === -1){
                    state.tabList.push(val)
                }
            }else{
                state.collapseMenu = null  
            }
        },
        // 判断关闭的状态
        closeTag(state,val){
            // 查找选中的是否索引值一致 进行单个删除
            const result = state.tabList.findIndex(item => item.name  === val.name )
            state.tabList.splice(result, 1)
        }
    },
}
面包屑独立文件
这里我们独立开一个文件 然后在首页的header里面引入
里面内容如下

<template>
    <div class="tabs">
        <el-tag 
            v-for="(tag, index) in tags"
            :key="tag.name"
             type="danger"
            :closable="tag.name !== 'AdminIndex'"
            :effect="$route.name === tag.name ? 'dark' : 'plain'"
            @click="changeMenu(tag)"
            @close="handleClose(tag, index)"
            size="small">
            {{ tag.nameZh }}
        </el-tag>
    </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
    export default {
        name: 'CommonTag',
        data () {
            return {
                
            }
        },
        methods: {
            ...mapMutations({
                close: 'closeTag'
            }),
            changeMenu(item) {
                this.$router.push({
                    name: item.name
                })
            },
            handleClose(tag, index) {
                const length = this.tags.length - 1
                this.close(tag)
                if (tag.name !== this.$route.name) {
                    return;
                }
                if (index === length) {
                    this.$router.push({
                        name: this.tags[index - 1].name
                    })
                } else {
                    this.$router.push({
                        name: this.tags[index].name
                    })
                }
            }
        },
        computed: {
            ...mapState({
                tags: state => state.tab.tabList//默认显示首页
            })
        }
    }
</script>
<style scoped>
    .tabs {
        padding:5px  10px;
        text-align: left;
        margin: -14px -20px 10px -20px;
        background-color: #fff;
    }

    .tabs .el-tag {
        margin-right: 10px;
        cursor: pointer;
    }
</style>
侧边栏独立文件
需要在如下所示加入点击事件

在这里插入图片描述

我这里的侧边栏使用递归只需要在子里面加入这个点击事件

在这里插入图片描述

//然后点击事件里面的方法写这种
methods: {
     clickMenu(item) {
       console.log(item)
        this.$router.push({
            name: item.name
        })
        this.$store.commit('selectMenu', item)
    }
  },

具体看本人码云项目 分支dev1

参考github

小阳生煎
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
框架123
A12536365214的博客
07-27 2057
框架效果预览："id": 1,"pid": 0,"meta": {"title": "首页"},},"id": 4,"pid": 0,"meta": {"title": "权限管理"},"id": 15,"pid": 4,"meta": {"title": "账号管理"},},"id": 32,"pid": 4,"meta": {"title": "用户协议管理"},},"id": 5,"pid": 0,"meta": {
Vue ant-d 实现面包屑和布局和菜单 demo
11-09
Vue ant-d 实现面包屑和布局和菜单 demo，里面使用vue+ant-d实现页面布局，面包屑、路由，菜单功能
AngularJS自定义指令实现面包屑功能完整实例
10-19
主要介绍了AngularJS自定义指令实现面包屑功能,结合完整实例形式分析了AngularJS自定义指令的定义、调用及面包屑功能的具体实现技巧,需要的朋友可以参考下
Vue动态面包屑功能的实现方法
10-16
面包屑功能是我们在项目中经常遇到的功能，今天小编使用Element-UI 进行实现在vue项目中实现面包屑功能，具体实现方式大家跟随小编一起学习吧
JS实现面包屑功能（拿来及用）
m0_71966801的博客
07-04 353
【代码】JS实现面包屑功能（拿来及用）
js面包屑导航
m0_73481765的博客
07-01 409
面包屑导航（Breadcrumb Navigation）是一种网站导航方式，它能够告诉用户当前所处的位置和路径，并提供回到上一级或其他相关页面的链接。3.最后在 JavaScript 中动态生成面包屑导航。可以通过查找当前页面在数组中的位置，然后生成相应的 HTML。这样就可以动态生成面包屑导航，并根据当前页面高亮显示所在位置。
js实现iframe框架的面包屑功能
杜永康的博客
04-25 1962
iFrame全称是HTML中的一个标签，用于在一个HTML文档中嵌入另一个HTML文档。iFrame框架可以将一个HTML文档嵌入到另一个HTML文档中的一个独立的窗口中，这个窗口可以独立于主窗口进行加载和渲染。在一个页面中嵌入另一个页面，例如在一篇文章中嵌入一段视频。在一个页面中嵌入一个广告，可以独立加载和渲染，不影响主页面的性能。在一个页面中嵌入一个登录框，可以通过iFrame框架实现跨域登录。
JS实现树形结构生成面包屑
最新发布
m0_65218210的博客
01-22 846
函数中，我们遍历树形结构数据，找到当前页面时将当前已经查找到的路径与当前节点的。这表示当前页面位于树形结构的首页、产品、产品分类和电脑四个节点下。函数中，我们使用递归的方式查找当前页面的路径。如果当前节点有子节点，则在子节点中继续查找。在上面的示例代码中，我们定义了一个树形结构数据。字段，并且可以有子节点。在示例代码中，我们假设当前页面的。函数，它接受一个树形结构数据。和当前已经查找到的路径。函数，最终打印出面包屑。函数，用于生成面包屑。连接起来，然后赋值给。函数，传入当前页面的。，即可生成对应的面包屑。
动态面包屑
zmy967131的博客
08-01 82
动态面包屑 vue3+element-plus
【仅适合初学者】html+css实现面包屑导航
05-16
html+css 实现面包屑导航，无js 效果
Vue实现面包屑功能(el-breadcrumb)
JunVei的博客
05-18 1896
vue实现面包屑
java web 面包屑,自动面包屑 Headers
weixin_29213525的博客
03-20 163
我在我的网站上实现了以下脚本 . 它会创建自动化的面包屑 . 我遇到的问题是它产生的 Headers . 对于您当前所在的页面，它会显示页面 Headers ，这很好 . 对于索引文件，它使用根文件夹名称而不是页面 Headers ，这是我想要它做的 . 举个例子;这就是它现在推出的内容 .家/艺术/绘画绘画我很好用它是页面 Headers . Art是文件夹名称，但我希望它是页面 Head...
js面包屑封装
qq_36262295的博客
09-03 790
前言 下面是拆解的代码 因为封装后不易于阅读 可以自己组合封装 const arr = [ //看板列表 { path: "/kanban", title: "看板", }, // 项目列表 { path: "/projects", title: "项目", children: [ { path: "/projects/list", title: "
vue.js动态面包屑
u012682013的博客
05-31 2786
最近在学习vue,正好手上有个项目还是用jquery写的,就自己尝试将这个项目的前端用vue实现,途中遇到了动态面包屑的问题,特此记录一下,如有不对的地方,欢迎指正. 需求描述: 点击左侧的导航,跳转到不同的页面,并且根据导航的路径,动态生成面包屑.面包屑的数据均来自于左侧的导航. 思路:1.面包屑作为一个单独的组件,在页面中引入.页面的结构如下: <template> ...
JS中如何制作面包屑导航
2301_79420857的博客
01-21 649
制作面包屑，首先我肯要先知道什么是面包屑导航，其原理是什么。面包屑导航这个概念来自于一个童话故事《汉赛尔和格莱特》，他们兄妹俩在穿过森林时不小心迷路了，但是却发现在沿途走过的地方都撒下面包屑，这些面包屑可以来帮助他们找到回家的路。所以面包屑导航的用意就是告知用户所处的当前网页的位置，方便用户可以通过该导航快速返回上一页。当我们点击树形菜单时，导航栏会出现一个面包屑（说明在树形菜单的点击事件里，每点击一次都会渲染一个）
Vue.js中的路由
yezhixingyue的博客
11-19 204
路由分为前端路由和后端路由，使用前端路由的优点在于其切换会更加平滑，所以想要更好的切换效果的话就需要使用到前端路由
springboot实现面包屑
07-27
在Spring Boot中实现面包屑功能可以通过以下步骤进行： 1. 在前端代码中，可以使用Vue.js和iview等框架来实现面包屑功能。可以通过computed属性来监听当前页面的路径，并将其存储在Vuex的状态管理中。\[1\] 2. 在...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值