Vue+ElementUI封装简易面包屑组件

sqmmmmm 2023-03-28 原文

在实际项目中面包屑是非常常见的一个功能，用于切换层级选项
当然有的公司会使用TagsView导航栏，这个后续在做介绍
今天分享一个简易的面包屑组件，这边配合ui库进行封装

安装依赖，在main.js中引入

yarn add element-ui

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.config.productionTip = false

Vue.use(ElementUI)

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

注册路由信息及关联components组件

const routes = [{
  path: '/',
  name: 'home',
  component: () => import('../views/Home.vue'),
  meta: { title: '首页', path: '/' },
  children: [{
    path: '/A-Business',
    component: () => import('../views/A-Business.vue'),
    meta: { title: 'A', path: '/A-Business' }
  },
  {
    path: '/B-Extension',
    component: () => import('../views/B-Extension.vue'),
    meta: { title: 'B', path: '/B-Extension' }
  },
  {
    path: '/C-Management',
    component: () => import('../views/C-Management.vue'),
    meta: { title: 'C', path: '/C-Management' }
  }, {
    path: '/D-customer',
    component: () => import('../views/D-customer.vue'),
    meta: { title: 'D', path: '/D-customer' }
  }
  ]
}]

新建vue文件，myBreadcrumb.vue，内部使用el-breadcrumb

<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item v-for="(item, i) in breadList" :key="i">
        <a @click.prevent="handleLink(item)">
          {{ item.meta.title }}
        </a>
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>
<script>
export default {
  data () {
    return {
      breadList: null
    }
  },
  created () {
    this.getBreadcrumb()
  },
  methods: {
    handleLink(item) {
      const { redirect, meta } = item;
      if (redirect) {
        this.$router.push(redirect);
        return;
      }
      this.$router.push(meta.path);
    },
    getBreadcrumb () {
      // 包含当前路由的所有嵌套路径片段的路由记录
      const matched = this.$route.matched.filter((item) => item.meta && item.meta.title);
      // 赋值循环渲染
      this.breadList = matched
    }
  },
  watch: {
    $route(route) {
      // 如果转到重定向页面，不要更新面包屑
      if (route.path.startsWith("/redirect/")) {
        return;
      }
      this.getBreadcrumb();
    }
  },
}
</script>

引入myBreadcrumb.vue面包屑组件注册使用即可

<template>
  <div>
     <!-- <myBreadcrumb /> -->
  </div>
</template>
import myBreadcrumb from "@/components/myBreadcrumb.vue";
export default {
  name: 'xxx'
  components: { myBreadcrumb },
};

欢迎大家评论，如有帮助可以关注+收藏，我会经常更新博客，大家一起讨论学习

面包屑简易 import gt path Vue

有关Vue+ElementUI封装简易面包屑组件的更多相关文章

基于C#实现简易绘图工具【100010177】 - 2
C#实现简易绘图工具一.引言实验目的:通过制作窗体应用程序(C#画图软件),熟悉基本的窗体设计过程以及控件设计,事件处理等,熟悉使用C#的winform窗体进行绘图的基本步骤,对于面向对象编程有更加深刻的体会.Tutorial任务设计一个具有基本功能的画图软件**·包括简单的新建文件,保存,重新绘图等功能**·实现一些基本图形的绘制,包括铅笔和基本形状等,学习橡皮工具的创建**·设计一个合理舒适的UI界面**注明:你可能需要先了解一些关于winform窗体应用程序绘图的基本知识,以及关于GDI+类和结构的知识二.实验环境Windows系统下的visualstudio2017C#窗体应用程序三.
计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2
项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU
(附源码)vue3.0＋.NET6实现聊天室(实时聊天SignalR) - 2
参考文章搭建文章gitte源码在线体验可以注册两个号来测试演示图：一.整体介绍　　介绍SignalR一种通讯模型Hub(中心模型，或者叫集线器模型)，调用这个模型写好的方法，去发送消息。　　内容有：　　　　①：Hub模型的方法介绍　　　　②：服务器端代码介绍　　　　③：前端vue3安装并调用后端方法　　　　④：聊天室样例整体流程：1、进入网站->调用连接SignalR的方法2、与好友发送消息->调用SignalR的自定义方法前端通过，signalR内置方法.invoke() 去请求接口3、监听接受方法（渲染消息）通过new signalR.HubConnectionBuilder().on
ruby-on-rails - 如何在 Ruby 中封装包含的模块方法？ - 2
我希望能够在包含该模块的类无法访问的模块中拥有方法。给定以下示例:classFooincludeBardefdo_stuffcommon_method_nameendendmoduleBardefdo_stuffcommon_method_nameendprivatedefcommon_method_name#blahblahendend我希望Foo.new.do_stuff爆炸，因为它试图访问模块试图对其隐藏的方法。不过，在上面的代码中，Foo.new.do_stuff可以正常工作:(有没有办法在Ruby中实现我想做的事情？更新-真正的代码classPlace"Place"}has_
vue 实现内容超出两行显示展开更多功能，可依据需求自定义任意行数！ - 2
平时开发中我们经常会遇到这样的需求，在一个不限高度的盒子中会有很多内容，如果全部显示用户体验会非常不好，所以可以先折叠起来，当内容达到一定高度时，显示展开更多按钮，点击即可显示全部内容，先来看看效果图：这样做用户体验瞬间得到提升，接下来看看具体细节。0">主要操作在内容这里{{item.username}},……展开更多样式大家可依据自己项目需求进行设计，这里就不贴了，主要说几个关键的。1、在data中定义三个属性isShowMore:false, //控制展开更多的显示与隐藏textHeight:null, //框中内容的高度status:false, //内容状态是否打开2.计算内容是否
vue3.0 + vite2.0+如何兼容低版本浏览器 - 2
这里写自定义目录标题一、问题二、解决三、解决方案四、打包预览一、问题在使用vue3.2和vite2开发一个移动端或者钉钉端H5微服务iosapp内置浏览器打开没问题安卓app内置浏览器打开空白页面vconsole打印出现报错globalthisundefind二、解决内置浏览器版本比较低打印出来是63vue3代码不兼容低版本浏览器三、解决方案步骤一：vite.config.ts里build.target配置项指定构建目标为es2015或者步骤二：安装@vitejs/plugin-legacy安装完报错也还在指定版本可以解决“@vitejs/plugin-legacy”:“1.8.0”,步骤三：
Android Studio开发之使用内容组件Content获取通讯信息讲解及实战（附源码包括添加手机联系人和发短信） - 2
运行有问题或需要源码请点赞关注收藏后评论区留言一、利用ContentResolver读写联系人在实际开发中，普通App很少会开放数据接口给其他应用访问。内容组件能够派上用场的情况往往是App想要访问系统应用的通讯数据，比如查看联系人，短信，通话记录等等，以及对这些通讯数据及逆行增删改查。首先要给AndroidMaifest.xml中添加响应的权限配置下面是往手机通讯录添加联系人信息的例子效果如下分成三个步骤先查出联系人的基本信息，然后查询联系人号码，再查询联系人邮箱代码 ContactAddActivity类packagecom.example.chapter07;importandroid
Vue3的新特性 - 2
Vue3的新特性包括：CompositionAPI：一种新的API风格，可将有关组件功能的代码逻辑封装在单独的函数中，从而更好地管理和重用代码。Teleport：可以让组件在DOM层次结构中的任何位置渲染。Suspense：一种新的异步渲染模式，可以优化应用程序的性能。更快的渲染速度：Vue3使用了新的虚拟DOM算法，并且对渲染过程进行了优化，因此在渲染大型应用时性能更高。更小的包大小：Vue3的打包大小比Vue2更小，因为它不再需要依赖像vue-template-compiler这样的工具。其他改进：Vue3还具有其他一些改进，例如更好的TypeScript支持、更好的错误提示和更好的调试工
ruby - 如何在 Ruby Gem 中封装 Ruby C 扩展？ - 2
我找不到很多这方面的文档。如何打包gem，以便在安装gem时编译C扩展？特别是我想这样做:在Linux和MacOSX上，我想在安装gem时编译C扩展在Windows上，我想简单地安装一个预编译的.so对此的任何帮助，特别是示例源代码，都将非常有用:) 最佳答案 LuisLavena创造了rake-compiler只是为了这个目的。Homepage/GitHubGitHubWiki但是，您确定需要C扩展吗？关于C扩展的事情是，每个Ruby实现都有自己的C扩展API(而非基于C的API，如XRuby、JRuby、Ruby.NET、Iro
ruby - Ruby 的 "Open Classes"会破坏封装吗？ - 2
在Ruby中，程序员可以更改预定义的类。所以一个非常糟糕的程序员可能会做这样的事情:classStringdef==(other)returntrueendend显然，几乎没有人会这么蠢，但是对预定义类进行更细微的更改可能会导致已经运行的代码出现问题的想法在我看来违反了封装原则。四个问题:首先，这是否实际上违反了面向对象的封装原则？其次，作为一名程序员，有没有一种方法可以保证我正在使用类的未修改版本的代码？第三，我应该在我的代码中“打开”类吗？原因？最后，在大规模生产编码环境中如何处理这类事情？换句话说，编程行业的人真的用其他人的代码来做这件事吗？将使用？或者即使他们不这样做，你如何确

Vue+ElementUI封装简易面包屑组件

有关Vue+ElementUI封装简易面包屑组件的更多相关文章

随机推荐