vue中的面包屑导航组件实例代码

vue的面包屑导航组件

用来将其放到navbar中；

Breadcrumb/index.vue

<template>
  <el-breadcrumb class="app-breadcrumb" separator="/">
   <transition-group>
    <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path" v-if="item.meta.title">
     <span  v-if='item.redirect==="noredirect"||index==levelList.length-1' class="no-redirect">{{item.meta.title}}</span>
     <router-link  v-else :to="item.redirect||item.path">{{item.meta.title}}</router-link>
    </el-breadcrumb-item>
   </transition-group>
  </el-breadcrumb>
</template>
<script>
  export default {
    name: "idnex",
   data(){
     return {
      levelList:null
     }
   },
   created() {
    this.getBreadcrumb()
   },
   watch:{
    $route(){
     this.getBreadcrumb()
    }
   },
   methods:{
    getBreadcrumb(){
      let matched=this.$route.matched.filter(item=>item.name)//$route.matched 将会是一个包含从上到下的所有对象 (副本)。
      const first=matched[0]
      if(first && first.name !=='dashboard'){//$route.name当前路由名称 ；$route.redirectedFrom重定向来源的路由的名字
       matched=[{ path: '/dashboard', meta: { title: 'dashboard' }}].concat(matched)
      }
      this.levelList=matched
     }
   }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
 .app-breadcrumb.el-breadcrumb {
  display: inline-block;
  font-size: 14px;
  line-height: 50px;
  margin-left: 10px;
  .no-redirect {
   color: #97a8be;
   cursor: text;
  }
 }
</style>

ps：下面在看下一段代码Vue 面包屑导航

样式采用的是element ui 中的面包屑设置的，

<template>
<el-breadcrumb>
<el-breadcrumb-item separator = '/' v-for = "(item,index) in breadlist" :key = 'index' :to="{path: item.path}">{{item.meta.CName}}
</el-breadcrumb-item>
</el-breadcrumb>
</template>
js部分
<script>
export default {
data(){
return {
breadlist: ''
}
},
created() {
this.getBread();
},
methods:{
getBread(){
this.breadlist = this.$route.matched;
this.$route.matched.forEach((item,index)=>{
//先判断父级路由是否是空字符串或者meta是否为首页，直接复写路径到根路径
item.meta.CName === '首页' ? item.path = '/' : this.$route.path === item.path;
});
}
},
watch:{
$route(){
this.getBread();
}
}
}
</script>

总结

以上所述是小编给大家介绍的vue中的面包屑导航组件实例代码,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

赞 (0)

相关推荐

  • 详解Vue底部导航栏组件

    不多说直接上代码 BottomNav.vue: <template> <div class="footer"> <div v-for='(item,index) of items' :class='[item.cls,{on:index === idx}]' @click="$router.push(item.push)"> <img :src="index===idx?item.iconSelect:item.i

  • 移动端底部导航固定配合vue-router实现组件切换功能

    在我们平时练习或者实际项目中也好,我们常常遇到这么一个需求:移动端中的导航并不是在顶部也不是在底部,而是在最底部且是固定的,当我们点击该导航项时会切换到对应的组件. 相信对于很多朋友而言,这是一个很简单的需求,而且市面上有很多开源的组件库就可以实现,像比如说:cube-ui等!那么对于一个要是还在练习以及对第三方组件库不是很了解的朋友不妨看看我这篇,相信会对你有所收获的! 首先,在实现这个需求之前,我们先分析或者回想下和自己做过的demo中哪个类似,相信很多朋友立马就会想起来---tab栏切换,

  • vue2.0 elementUI制作面包屑导航栏

    Main.js var routeList = []; router.beforeEach((to, from, next) => { var index = -1; for(var i = 0; i < routeList.length; i++) { if(routeList[i].name == to.name) { index = i; break; } } if (index !== -1) { //如果存在路由列表,则把之后的路由都删掉 routeList.splice(index

  • vue动态路由实现多级嵌套面包屑的思路与方法

    前言 最近在工作中遇到了一个问题,是关于vue动态路由多级嵌套面包屑怎么弄(不是动态路由嵌套可以尝试用 this.$route.matched方法获取到path和name集合,动态的嵌套获取不到全部具体的id) 功能比如:A列表页面路由如/a,点击任意一列进入任意一个A的详情页面名字为B,/b/03(这个是动态路由弄是吧,03就是id嘛),点击B页面任意一列,再进入B的详情页名字为C,路由如/bdetail/01;现在弄面包屑要获取到的路由是刚刚打开的,如(/a:/b/03:/bdetail/0

  • Vue动态面包屑功能的实现方法

    面包屑应该是我们在项目中经常使用的一个功能,一般情况下它用来表示我们当前所处的站点位置,也可以帮助我们能够更快的回到上个层级. 今天我们就来聊聊如何在 Vue 的项目中实现面包屑功能.以下案例都是使用 Element-UI 进行实现. 最笨的方式 首先我们想到的最笨的方法就是在每个需要面包屑的页面中固定写好. <template> <div class="example-container"> <el-breadcrumb separator="

  • 写一个移动端惯性滑动&回弹Vue导航栏组件 ly-tab

    写一个移动端惯性滑动&回弹Vue导航栏组件 ly-tab

    前段时间写了一个移动端的自适应滑动Vue导航栏组件,觉得有一定实用性,大家可能会用得到(当然有些大佬自己写得更好的话就没必要啦),于是前两天整理了一下,目前已经发布到npm和GitHub上了,点我到npm,点我到GitHub项目 ,有需要的同学可以在项目中 npm install ly-tab -S 或者 yarn add ly-tab 使用,具体用法下面会讲到. 好了,先看看效果吧 好的,开始废话了,实习差不多3个月了,这段时间跟着导师大佬也有接触过一些项目,也学到了不少东西,接触到的项目基本

  • 详解mpvue中小程序自定义导航组件开发指南

    这篇笔记主要记录一下基于mpvue的小程序中实现自定义导航的思路及应用.分享出来抛砖引玉,如有谬误或优化空间,欢迎交流. 小程序的配置项navigationStyle设置为custom之后,导航栏只保留右上角胶囊按钮,颜色.标题文字内容均可以自定义,可以此实现导航栏的个性化需求,实际应用如沉浸式视频播放页等. 小程序7.0.0之后的版本开始支持自定义单个页面的导航栏,将页面的navigationStyle设置为custom即可.mpvue的配置方式如下: 由于不同操作系统.不同机型的导航栏高度是

  • Vue.js+cube-ui（Scroll组件）实现类似头条效果的横向滚动导航条

    本博主在一次个人移动端项目中,遇到这么一个需求:希望自己的项目中,头部导航条的效果可以像今日头条那样,横向滚动! 对于这样的效果,在各大移动端项目中几乎是随处可见,为什么呢? 我们都知道,对于移动端也就是手机上,我们页面的宽度并不像PC端那样大,可以显示很长的导航项,但对于我们移动端来说,由于功能的拓展,或者业务的细分,往往导航项也会随之增多,一旦超过移动端在一行的页面显示宽度,那便会出现导航项换行的现象,虽说也有这样布局,但一旦导航项增多到一定程度的时候,我们的页面(首页)将均被导航项霸占,这

  • vue中的面包屑导航组件实例代码

    vue的面包屑导航组件 用来将其放到navbar中: Breadcrumb/index.vue <template> <el-breadcrumb class="app-breadcrumb" separator="/"> <transition-group> <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.pat

  • vue实现动态面包屑导航

    vue实现动态面包屑导航

    本文实例为大家分享了vue实现动态面包屑导航的具体代码,供大家参考,具体内容如下 动态面包屑导航是根据路由中的 matched 获取到的单独提取出面包屑导航栏组件 <template>   <el-breadcrumb class="app-breadcrumb" separator="/">     <transition-group name="breadcrumb">       <el-bread

  • vue项目实现面包屑导航

    vue项目实现面包屑导航

    本文实例为大家分享了vue项目实现面包屑导航的具体代码,供大家参考,具体内容如下 安装依赖 npm i vuex 创建 tagView.vue <template>   <div class="tags-view-container">     <scroll-pane class="tags-view-wrapper" ref="scrollPane">       <router-link     

  • vue 面包屑导航组件封装

    vue 面包屑导航组件封装

    目录 一.为什么需要面包屑? 二.初级封装 1. 实现思路 2. 代码演示 3. 使用 4. 不足 三.进阶封装 1. 实现思路 2. 代码演示 3. 使用 4. 不足 四.高阶封装 1. 思路 2. 代码演示 3. 使用 面包屑导航可以将浏览过的页面记录下来,方便很快速的跳转回某一个页面,本文介绍了几种自己封装面包屑组件的方式. 一.为什么需要面包屑? 当网页进行了多次跳转后,用户可能早就已经晕头转向了.作为程序猿的我们可能通过地址栏参数还可以分清楚当前处于哪一个位置,终归网页是要展示给用户.

  • vue中for循环更改数据的实例代码(数据变化但页面数据未变）

    废话不多说了,直接给大家贴代码了,具体代码如下所示: let that = this; for(let i = 0;i<that.tableData.length;i++){ this.tableData[i].zzzk = this.midForm.zzzk; console.log(this.tableData[i].zzzk) this.tableData[i].zhje = this.tableData[i].zzzk * this.tableData[i].dj * this.tabl

  • WordPress免插件实现面包屑导航的示例代码

    你如果在开发自己的wordpress主题,想加入面包屑导航,而又不想使用插件的话,下面的代码对你有帮助,这里提供了网上较为流行的两种代码,一是功能非常完善的,一是一个较为简洁的代码. 前面介绍了一种方法,你也可以尝试一下,在文末给大家详细介绍了自定义函数实现wordpress面包屑导航的代码,可以点击查看下. 功能非常完善代码 1.将下面的代码添加到主题的 functions.php : /** * WordPress 添加面包屑导航 * http://www.511yj.com/wordpre

  • 详解vue中使用transition和animation的实例代码

    以前写页面注重在功能上,对于transition和animation是只闻其声,不见其人,对于页面动画效果心理一直痒痒的.最近做活动页面,要求页面比较酷炫,终于有机会认真了解了. transition:英文过渡的意思,作用是过渡效果:animation:英文活泼.生气.激励,动画片就是animation film,作用是动画效果. transition在w3school的实例: //将鼠标悬停在一个 div 元素上,逐步改变表格的宽度从 100px 到 300px: div { width:10

  • vue中computed和watch的使用实例代码解析

    vue中computed和watch的使用实例代码解析

    需求: 1.点击按钮实现天气的切换: 2.用watch进行监视天气产生变化的数据: 实现代码(helloworld.vue实现代码): <template> <!-- 准备好一个容器--> <div id="root"> <h2>今天天气很{{info}}</h2> <button @click="changeWeather">切换天气</button> </div> &

  • vue中七牛插件使用的实例代码

    本文介绍了vue中七牛插件使用,我也正在学习,分享给大家,顺便留个笔记,废话不说了,如下: <template> <div id="cxUpload" class="cx-upload"> <button id="pickfiles" class="uploadBtn">上传</button> </div> </template> <script&g

  • Vue 解决多级动态面包屑导航的问题

    固定路由的面包屑导航 我们在配置router的时候,可以将面包屑数据配置在meta中, 例如 路由配置: { path: '/project/process/:id', name: 'process', component: () => import('@/views/project/process/main.vue'), meta: [ { name: '项目管理列表' }, { name: '项目列表', url: '/project/list' }, { name: '里程碑' }, ],

随机推荐