vue + Element UI 动态Breadcrumb 面包屑的制作

这篇具有很好参考价值的文章主要介绍了vue + Element UI 动态Breadcrumb 面包屑的制作。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

效果


element 面包屑动态,VUE,vue.js

面包屑用于显示当前页面的路径,快速返回之前的任意页面。

一、路由配置

代码如下:

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const VueRouterPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(to) {
  return VueRouterPush.call(this, to).catch(err => err)
}

const routes = [
  { 
    path: '/', 
    component: ()=>import("@/views/LoginView") 
  },
  { 
    path: '/login', 
    name: "login",
    component: ()=>import("@/views/LoginView"),
  },
  {
    path: '/home',
    name:"home",
    component: ()=>import("@/views/HomeView"),
    meta:{
      title:'首页',
      path:"/home"
    },
    children: [
      { //主页
        path: '/home', 
        component: ()=>import("@/views/main/MainView"),
        meta:{
          title:'',
          path:"/home"
        }
      }, 
      { //个人信息
        path: 'userinfo', 
        component: ()=>import("@/views/userinfo/UserInfo"), 
        meta:{
          title:'个人中心',
          path:"/userinfo"
        }
      },  
      { //分析页
        path: 'analyse', 
        component: ()=>import("@/views/Analyse"),
        meta:{
          title:'分析页',
          path:"/analyse"
        }
      },  
    ]
  }
]

const router = new VueRouter({
  routes
})

export default router

这里使用了router的meta属性,为其设置名为title的属性,用来当作面包屑的展示名称,当然,也可以直接使用路由的name属性。

二、使用步骤

1.Breadcrumb.vue:

代码如下:

<template>
  <div class="Bread">
    <el-breadcrumb separator="/">
      <!-- to为点击跳转 title为路由中的meta属性定义的标题 -->
      <el-breadcrumb-item v-for="(item, index) in breadList" :key="index" :to="item.meta.path">
        {{ item.meta.title }}
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script>
export default {
  data() {
    return {
      breadList: [],
    };
  },
  watch: {
    $route() {//监听$route
      this.getBreadcrumb();
    },
  },
  methods: {
    isHome(route) {
      return route.name === "home";
    },
    getBreadcrumb() {
      let matched = this.$route.matched;
      //如果不是首页
      if (!this.isHome(matched[0])) {
        matched = [].concat(matched);
      }
      this.breadList = matched;
    },
  },
  created() {
    //生命周期中调用获取数据的方法
    this.getBreadcrumb();
  },
};
</script>

<style>
.Bread{
  height: 30px;
  float: left;
}
</style>

2.在页面中使用

代码如下:

<!-- 头部 -->
<template>
  <div id="app">
    <div class="header">
      <h1>欢迎使用My-Vue-Admin!</h1>
      <div class="full-screen">
        <Avatar></Avatar>
        <FullScroll></FullScroll>
      </div>
    </div>
    <div class="Bread">
      <BreadVue></BreadVue>
    </div>
  </div>
</template>

<script>
// 导入ScreenFull组件,控制全屏
import FullScroll from '@/components/Header/ScreenFull.vue'
// 导入头像组件
import Avatar from '@/components/Header/AvatarHeader.vue'
// 导入面包屑
import BreadVue from '../components/Bread.vue'
export default {
  components: {
    FullScroll,
    Avatar,
    BreadVue
  },
  data(){
    return{
      breadList:null,
    }
  },
}
</script>

<style lang="less" scoped>
#app {
  background-color: #ffffff;
  margin: 0;
  padding: 0 0 18px 0px;
  box-shadow: 0px 0px 8px 1px #e6e6e6;
  overflow: hidden;
}
.header h1 {
  margin-bottom: 5px;
  height: 50px;
  float: left;
  margin-left: 40px;
}
.header {
  text-align: left;
  overflow: hidden;
  text-align: right;
  box-shadow: 0px 0px 5px 0px #e6e6e6;
}
.header i {
  float: right;
}
#app h1 {
  margin-top: 0;
}
.full-screen:before {
  display: flex;
  overflow: hidden;
  padding-top: 20px;
}
/deep/.el-breadcrumb {
  margin: 20px 0 0 40px;
}
</style>


总结

文件目录

element 面包屑动态,VUE,vue.js
vue-router和breadcrumb面包屑结合,实现展示当前路径下的路由信息。关键是利用route对象的matched属性,得到前匹配的路径中所包含的所有片段所对应的配置参数对象数组,然后遍历数组,并利用数组中对象的信息,展示到面包屑中。每个对象的path属性为其对应的路由路径,meta属性为其元数据对象。
element 面包屑动态,VUE,vue.js文章来源地址https://www.toymoban.com/news/detail-699053.html

到了这里,关于vue + Element UI 动态Breadcrumb 面包屑的制作的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 自制Breadcrumb 面包屑

    使用场景: 当系统拥有超过两级以上的层级结构时 当需要告知用户『你在哪里』时 当需要向上导航的功能时

    2024年01月19日
    浏览(52)
  • ElementUI浅尝辄止29:Breadcrumb 面包屑

    显示当前页面的路径,快速返回之前的任意页面。 在 el-breadcrumb 中使用 el-breadcrumb-item 标签表示从首页开始的每一级。Element 提供了一个 separator 属性,在 el-breadcrumb 标签中设置它来决定分隔符,它只能是字符串,默认为斜杠 / 。 通过设置  separator-class  可使用相应的  icon

    2024年02月09日
    浏览(49)
  • vue修改element面包屑样式

    element面包屑默认后边的是浅颜色的,前边的是深色的, 现在UI设计图要修改成前面是浅色的,后面是深色的 如果直接修改样式会无法区分一级或者二级路由,用一下方法可以实现: 这样就会给一级路由加上了first_route类名,给二级路由加上了two_route的类名,然后定义样式:

    2024年01月25日
    浏览(44)
  • Vue + ElementUI 动态生成面包屑导航教程

    在Web应用程序中,面包屑导航是一种常用的导航方式,它可以帮助用户更好地理解当前页面的位置和层次关系。在Vue项目中,结合ElementUI组件库,我们可以很容易地实现一个动态生成面包屑导航的功能。本教程将介绍如何使用Vue + ElementUI来实现动态生成面包屑导航的功能。

    2024年02月06日
    浏览(47)
  • [VUE学习]权限管理系统前端vue实现9-动态路由,动态标签页,动态面包屑

                    在总体布局页面添加router router-view 是 Vue Router 提供的组件,用于动态展示匹配到的路由组件内容。 通过在合适的位置放置 router-view ,你可以根据路由路径动态地渲染对应的组件内容。                     因为我们是多级页面 之后动态路由也是多级的 如

    2024年02月13日
    浏览(45)
  • 若依 vue前端 动态设置路由path不同参数 在页面容器里打开新页面(新路由),面包屑和标签页标题根据参数动态改变,面包屑多级标题,侧边栏对应菜单亮起

    因为是在vue源码的基础上进行修改,所以,就没有复制代码在文章上,采取的是截图对比源码和我修改的代码片段。要麻烦你们自己手敲了。 场景:在费用配置列表中,点击每一项的配置,都会在页面容器内部打开一个新页面,所以新页面的路径一样,根据传的参数不同,面

    2024年01月16日
    浏览(55)
  • vue-router + element-plus实现面包屑导航栏和路由标签栏

    首先,先解释一下什么是面包屑导航栏和路由标签栏。 如下图所示,面包屑导航栏就是展示当前所处路由信息和父辈路由信息的导航栏,它的作用是提示用户当前页面所在位置;路由标签栏就类似于浏览器的标签栏,每个标签对应一个路由页面,点击该标签可以进入该路由页

    2023年04月23日
    浏览(48)
  • js面包屑,如何制作面包屑,什么是面包屑,又如何去理解面包屑是什么呢,对于不会应该怎么办呢?这篇文章告诉你。

    🙂博主:锅盖哒 🙂文章核心: 带你了解原生js面包屑框架 目录大纲 1.面包屑的概念与框架地址 2.功能框架预览于介绍 框架效果预览: 页面架构代码预览: HTML页面预览:  权限验证介绍 3.面包屑的逻辑  下面就是面包屑逻辑 1.首先从login页面进入拿到渲染左侧列表的值 2

    2024年02月14日
    浏览(43)
  • UI组件-面包屑简介

    设计世界充满了与食物相关的类比,例如汉堡菜单、Snackbars或面包屑。面包屑或面包屑路径是一种导航元素,可帮助用户了解他们在网站上的当前位置。 1. 定义: 它们代表链接的水平列表,其中最后一个表示当前位置,其余定义其“祖先”(父页面、祖父页面等)。面包屑

    2024年02月06日
    浏览(38)
  • 【Vue项目搭建】修改【若依框架】的侧边栏、导航栏、面包屑样式、修改全局页面样式

    掌握分寸感,找目标一致的人协同你,有效地调配资源,就可以提高效率。 写在前面的话 :博主最近想要搭建自己的前端若依项目,因此此系列博客会做一些记录。我的项目gitee地址: https://gitee.com/xuruicong/rachel-front-show 说明:只运行前端项目,只需要要下载官方项目http:

    2024年01月19日
    浏览(90)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包