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


Posted in Javascript onAugust 16, 2017

前言

最近在工作中遇到了一个问题,是关于vue动态路由多级嵌套面包屑怎么弄(不是动态路由嵌套可以尝试用 this.$route.matched方法获取到path和name集合,动态的嵌套获取不到全部具体的id)

功能比如:A列表页面路由如/a,点击任意一列进入任意一个A的详情页面名字为B,/b/03(这个是动态路由弄是吧,03就是id嘛),点击B页面任意一列,再进入B的详情页名字为C,路由如/bdetail/01;现在弄面包屑要获取到的路由是刚刚打开的,如(/a;/b/03;/bdetail/01)

思路:获取所有进入的层级的路由和名称如breadlist=[{path:'/a',name:'一级'},{path:'/b/03',name:'二级'},{path:'/bdetail/01',name:'三级'}] ,然后遍历出来如: <span v-for="(item in breadlist)"><router-link :to="item.path">{{item.name}}</router-link></span>

做法

下面贴出相关代码:

A列表页面跳转按钮:(breadNum记录面包屑层级)

<router-link :to="{path:'/b/'+id,query:{breadNum:2}}"></router-link>

B列表页面跳转按钮:

<router-link :to="{path:'/bbdetail/'+id,query:{breadNum:3}}"></router-link>

breadcrumb.vue页面:

<template>
  <div class="breadbox">
   <span v-for="(item,index) in breadlist" >
    <router-link :to="item.path">{{item.name}}</router-link>
   </span>
  </div>
</template>
<script>
 export default{
  created() {
   this.getBreadcrumb();
  },
  data() {
   return {
    breadlist: '' // 路由集合
   }
  },
  methods: {
   getBreadcrumb() {
    var breadNumber= this.$route.query.breadNum || 1;//url变量breadNum记录层级,默认为1,如果大于1,要添加上变量;
    var breadLength=this.$store.state.breadListState.length;//目前breadlist集合数组个数
    var curName=this.$route.name;
    var curPath=this.$route.fullPath;
    var newBread={name:curName,path:curPath};
    var ishome=curName=='首页';
    console.log(ishome);
    if(breadNumber===1){//点击一级菜单
     this.$store.commit('breadListStateRemove',1);//初始化,只有首页面包屑按钮
     if(!ishome)//如果不是首页
      this.$store.commit('breadListStateAdd',newBread);//当前页面添加到breadlist集合
    }
    else if(breadLength<=breadNumber){//如果不是一级导航,并且breadlist集合个数等于或者小于目前层级
     this.$store.commit('breadListStateAdd',newBread);//要把当前路由添加到breadlist集合
    }else{
     this.$store.commit('breadListStateRemove',parseInt(breadNumber)+1);//如果往回点面包屑导航,截取;
    }
    this.breadlist=this.$store.state.breadListState;
    console.log(this.breadlist);
   }
  },
  watch: {
   $route () {
    this.getBreadcrumb();
   }
  },
 }
</script>

状态管理store.js代码:

export default store = new Vuex.Store({
 state: {
 breadListState:[
  {name:'首页',path:'/'}
 ]
 },
 mutations: {
 breadListStateAdd(state,obj){
  state.breadListState.push(obj);
 },
 breadListStateRemove(state,num){
  state.breadListState=state.breadListState.slice(0,num);
 }
 }

})

路由route.js代码:

{
 path: '/',
 name: '首页',
 component: Main,
 redirect:'/home',
 children:[
  {path: '/a',name: 'A页面',component: APage},
  {path: '/b/:id',name: 'B页面',component: BPage},
  {path: '/bdetail/:id',name: 'C页面',component: CPage},
 ]
}

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
写出更好的JavaScript程序之undefined篇(中)
Nov 23 Javascript
来自qq的javascript面试题
Jul 24 Javascript
基于jquery创建的一个图片、视频缓冲的效果样式插件
Aug 28 Javascript
node.js中的path.resolve方法使用说明
Dec 08 Javascript
基于jquery实现放大镜效果
Aug 17 Javascript
Bootstrap安装环境配置教程分享
May 27 Javascript
纯JavaScript手写图片轮播代码
Oct 20 Javascript
JS实现线性表的顺序表示方法示例【经典数据结构】
Apr 11 Javascript
纯js实现隔行变色效果
Nov 29 Javascript
jQuery pagination分页示例详解
Oct 23 jQuery
基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)
May 07 Javascript
vue Tab切换以及缓存页面处理的几种方式
Nov 05 Javascript
基于js 本地存储(详解)
Aug 16 #Javascript
基于Vue实例生命周期(全面解析)
Aug 16 #Javascript
基于JQuery的Ajax方法使用详解
Aug 16 #jQuery
angular或者js怎么确定选中ul中的哪几个li
Aug 16 #Javascript
JS操作时间 - UNIX时间戳的简单介绍(必看篇)
Aug 16 #Javascript
label+input实现按钮开关切换效果的实例
Aug 16 #Javascript
bootstrap modal+gridview实现弹出框效果
Aug 15 #Javascript
You might like
色色整理的PHP面试题集锦
2012/03/08 PHP
Yii配置文件用法详解
2014/12/04 PHP
PHP设计模式之装饰者模式代码实例
2015/05/11 PHP
5款适合PHP使用的HTML编辑器推荐
2015/07/03 PHP
PHP生成推广海报的方法分享
2018/04/22 PHP
用CSS+JS实现的进度条效果效果
2007/06/05 Javascript
jquer之ajaxQueue简单实现代码
2011/09/15 Javascript
这段js代码得节约你多少时间
2011/12/20 Javascript
JS读取cookies信息(记录用户名)
2012/01/10 Javascript
js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
2012/12/27 Javascript
js 获取页面高度和宽度兼容 ie firefox chrome等
2014/05/14 Javascript
详解JavaScript的Polymer框架中的通知交互
2015/07/29 Javascript
JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解
2015/08/06 Javascript
浅谈javascript alert和confirm的美化
2016/12/15 Javascript
Express与NodeJs创建服务器的两种方法
2017/02/06 NodeJs
JavaScript html5利用FileReader实现上传功能
2020/03/27 Javascript
微信小程序顶部可滚动导航效果
2017/10/31 Javascript
详解mpvue开发小程序小总结
2018/07/25 Javascript
layui导出所有数据的例子
2019/09/10 Javascript
React实现全选功能
2020/08/25 Javascript
修改Python的pyxmpp2中的主循环使其提高性能
2015/04/24 Python
python+django+sql学生信息管理后台开发
2018/01/11 Python
浅谈Python中的zip()与*zip()函数详解
2018/02/24 Python
Python基于Floyd算法求解最短路径距离问题实例详解
2018/05/16 Python
python计算n的阶乘的方法代码
2019/10/25 Python
详解如何修改python中字典的键和值
2020/09/29 Python
Python tkinter之Bind(绑定事件)的使用示例
2021/02/05 Python
使用spring mvc+localResizeIMG实现HTML5端图片压缩上传的功能
2016/12/16 HTML / CSS
GWT (Google Web Toolkit)有哪些主要的原件组成?
2015/06/08 面试题
优秀高中学生评语
2014/12/30 职场文书
领导工作表现评语
2015/01/04 职场文书
教师求职简历自我评价
2015/03/10 职场文书
一篇合格的广告文案,其主要目的是什么?
2019/07/12 职场文书
24年收藏2000多部退役军用电台
2022/02/18 无线电
Vue2.0搭建脚手架
2022/03/13 Vue.js
安装Ruby和 Rails的详细步骤
2022/04/19 Ruby