element实现动态路由+面包屑

要掌握：localStorage，组件封装
​​​​请添加图片描述

emm，第一次上传视频转gif的图片，效果不咋好。。。
视频转gif 的软件连接 http://www.zxt2007.com/downloads.html
找到一个可以截取部分视频制作gif图的软件https://soft.onlinedo.cn/gif/

  1. 在 components 下新建一个 curmbs 文件夹，并在该文件夹下新建一个 index.vue 文件。
  2. router.js 中的配置，添加一个 meta对象
    在这里插入图片描述
  3. 代码
<template><div class="crumbs"><!-- 面包屑 --><el-card class="box-card"><el-breadcrumb separator="/"><el-breadcrumb-item v-for="(level,index)  in this.levelList" :key="index" :to="level.path">{{level.name}}</el-breadcrumb-item></el-breadcrumb></el-card></div>
</template><script>
export default {name : "crumbs",data() {return {levelList: []}},watch: {$route(to,from) {console.log(to,from)// 思路：判断meta中breadNumber为几，就把它放在第几个// 注意：存放到localStorage中的数据格式最好统一，我在这里把它统一成了数组的格式// levelList最终的格式要为：[{name:"xx",path:"xx",breadNum:"xx"}]this.getBreadcrumb()}},methods:{getBreadcrumb() { // 1.获取当前的name,path,breadNumbervar newName = this.$route.name;var newPath = this.$route.fullPath;var newBreadNum = this.$route.meta.breadNumber;   // 2.获取前一页存下的name,path,breadNumbervar oldName = JSON.parse(window.localStorage.getItem("oldName"));var oldPath = JSON.parse(window.localStorage.getItem("oldPath"));var oldBreadNum = JSON.parse(window.localStorage.getItem("oldBreadNum"));var routerInfo =  JSON.parse(window.localStorage.getItem("routerInfo")) || [];  this.levelList = routerInfo;     // 3.判断是否是第一层，即初始位置，如果是第一层，分两种情况if(this.$route.meta.breadNumber === 1){// 3.1 localStorage有值，那么this.levelList不是空值，说明是由上一个主路由进来的，需要清空之前localStorage的值，并且重新赋值给levelListif(this.levelList.length != 0 ){localStorage.removeItem("oldName");localStorage.removeItem("oldPath");localStorage.removeItem("oldBreadNum");localStorage.removeItem("routerInfo");this.levelList = [];            }// 3.2 localStorage没有值，说明就是第一次进主路由，直接赋值this.levelList.push({"name":newName,"path":newPath,"breadNumber":newBreadNum});// this.$store.commit('breadCrumb/BREAD_PATH',{ newName,newPath,newBreadNum });// 按照数组格式的方式存放var nameStr = [];nameStr.push(newName);var pathStr=[];pathStr.push(newPath);var breadNumStr= [];breadNumStr.push(newBreadNum);window.localStorage.setItem("oldName",JSON.stringify(nameStr));window.localStorage.setItem("oldPath",JSON.stringify(pathStr));window.localStorage.setItem("oldBreadNum",JSON.stringify(breadNumStr));window.localStorage.setItem("routerInfo",JSON.stringify(this.levelList));}else{  var isBreadNumber = false;   // 4.breadNumber除了等于1，其他值时，this.levalList一定不是空值，判断点击的这个breadNumber数组中是否存在// 4.1 如果存在，就要删掉这个后面的所有值，并且将点击所获得的的这个值存进this.levalList数组中// 4.2 如果不存在，说明是按照顺序进行的，把它存到localStorage中，并把值给this.leavalList数组//在这里不用return，否则会终止循环for(var i = 0 ;i< this.levelList.length; i++){if(this.levelList[i].breadNumber == newBreadNum){// return true; // 为true时表示数组内已存在 false表示不存在isBreadNumber = true;break;}}if( isBreadNumber ){//删除点击的后面所有信息，localStorage中的数据也要删除（这里的删除是截取，而不是完全删除），然后将该信息添加进去        //要注意的是，这里的变化还有可能是点击面包屑时产生的，其他地方通常是通过路由跳转得到的           // 注意这里splice的用法，如果直接写在localStorage.setItem 中，得到的值是被截取的值，而不是截取后的值oldName.splice(newBreadNum,oldName.length-newBreadNum );window.localStorage.setItem("oldName",JSON.stringify( oldName ));oldPath.splice(newBreadNum,oldPath.length-newBreadNum);window.localStorage.setItem("oldPath",JSON.stringify( oldPath ));oldBreadNum.splice(newBreadNum,oldBreadNum.length-newBreadNum);window.localStorage.setItem("oldBreadNum",JSON.stringify( oldBreadNum ));routerInfo.splice( newBreadNum,routerInfo.length-newBreadNum);window.localStorage.setItem("routerInfo",JSON.stringify( routerInfo ))}else{var oldNameStr = JSON.parse(window.localStorage.getItem("oldName"));oldNameStr.push(newName);window.localStorage.setItem("oldName",JSON.stringify(oldNameStr));var oldPathStr = JSON.parse(window.localStorage.getItem("oldPath"));oldPathStr.push(newPath);window.localStorage.setItem("oldPath",JSON.stringify(oldPathStr));var oldBreadNumStr = JSON.parse(window.localStorage.getItem("oldBreadNum"));oldBreadNumStr.push(newBreadNum);window.localStorage.setItem("oldBreadNum",JSON.stringify(oldBreadNumStr));this.levelList.push({"name":newName,"path":newPath,"breadNumber":newBreadNum});window.localStorage.setItem("routerInfo",JSON.stringify(this.levelList));     }}}},created(){this.getBreadcrumb();        }
}
</script><style scoped lang="scss">
.box-card{margin-bottom: 20px;
}
</style>

上面 localStorage存储的name, path,breadNum 是我测试的时候存的，也可以删除，简洁版代码：

<template><div class="crumbs"><!-- 面包屑 --><el-card class="box-card" v-show="isShow"><el-breadcrumb separator="/"><el-breadcrumb-item ><a href="javascript:;">{{$route.matched[0].name}}</a></el-breadcrumb-item><el-breadcrumb-item v-for="(level,index)  in this.levelList" :key="index" :to="level.path">{{level.name}}</el-breadcrumb-item></el-breadcrumb></el-card></div>
</template><script>
export default {name : "crumbs",props:{isShow:{type:Boolean,default:true //默认值为true 显示}},data() {return {levelList: []}},watch: {$route(to,from) {// console.log(to,from)// 思路：判断meta中breadNumber为几，就把它放在第几个// 注意：存放到localStorage中的数据格式最好统一，我在这里把它统一成了数组的格式// levelList最终的格式要为：[{name:"xx",path:"xx",breadNum:"xx"}]this.getBreadcrumb()}},methods:{getBreadcrumb() { // 1.获取当前的name,path,breadNumbervar newName = this.$route.name;var newPath = this.$route.fullPath;var newBreadNum = this.$route.meta.breadNumber;   // 2.获取前一页存下的name,path,breadNumbervar routerInfo =  JSON.parse(window.localStorage.getItem("routerInfo")) || [];     this.levelList = routerInfo;     // 3.判断是否是第一层，即初始位置，如果是第一层，分两种情况if(this.$route.meta.breadNumber === 1){// 3.1 localStorage有值，那么this.levelList不是空值，说明是由上一个主路由进来的，需要清空之前localStorage的值，并且重新赋值给levelListif(this.levelList.length != 0 ){localStorage.removeItem("routerInfo");this.levelList = [];            }// 3.2 localStorage没有值，说明就是第一次进主路由，直接赋值this.levelList.push({"name":newName,"path":newPath,"breadNumber":newBreadNum});// 按照数组格式的方式存放window.localStorage.setItem("routerInfo",JSON.stringify(this.levelList));                } else{ // 4.breadNumber不等于1时，那么this.levalList一定不是空值，判断获取到的这个breadNumber在数组中是否存在 var isBreadNumber = false;          for(var i =0 ;i< this.levelList.length; i++){if(this.levelList[i].breadNumber == newBreadNum){// return true; // 为true时表示数组内已存在 false表示不存在isBreadNumber = true;break; //在这里不用return，return会终止循环}}// 4.1 如果存在，说明是所有路由展示已经完（或者是展示了前面几个，然后点击面包屑），点击面包屑上其中的一个标签//就要删掉这个后面的所有值，并且将点击所获得的的这个值存进this.levalList数组中if( isBreadNumber ){//删除点击的后面所有信息，localStorage中的数据也要删除（这里的删除是截取，而不是完全删除），然后将该信息添加进去        //要注意的是，这里的变化还有可能是点击面包屑时产生的，其他地方通常是通过路由跳转得到的           // 注意这里splice的用法，如果直接写在localStorage.setItem 中，得到的值是被截取的值，而不是截取后的值routerInfo.splice( newBreadNum,routerInfo.length-newBreadNum);window.localStorage.setItem("routerInfo",JSON.stringify( routerInfo ));          } else { // 4.2 如果不存在，说明是按照顺序进行的,如一级跳到二级，再从二级跳到三级//把它存到localStorage中，并把值给this.leavalList数组this.levelList.push({"name":newName,"path":newPath,"breadNumber":newBreadNum});window.localStorage.setItem("routerInfo",JSON.stringify(this.levelList));     }}}      },created(){this.getBreadcrumb();   }
}
</script><style scoped lang="scss">
.box-card{margin-bottom: 20px;
}</style>
  1. 注册
    在这里插入图片描述
  2. 如果想要一部分页面显示该组件，一部分不显示，那么需要用到 props 传参。
    具体做法参考：
    （1）在 index.js 中
<el-card class="box-card" v-show = "isShow">

export default {
props:{isShow:{type:Boolean,default:true //默认值为true 显示}}
}

(2) 组件调用时

<crumbs :isShow=false></crumbs> //false表示不显示面包屑
  1. 如果想要将左侧主导航栏也显示出来，则添加代码：
    原代码：
<el-breadcrumb separator="/">  <el-breadcrumb-item v-for="(level,index)  in this.levelList" :key="index" :to="level.path">{{level.name}}</el-breadcrumb-item></el-breadcrumb>

<el-breadcrumb-item ><a href="javascript:;">{{$route.matched[0].name}}</a>
</el-breadcrumb-item>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/362704.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Matlab——矩阵运算 矩阵基本变换操作

Matlab——矩阵运算 矩阵基本变换操作

矩阵运算 加 - 减 .* 乘 ./ 左除 .\ 右除 .^ 次方 . 转置 除了加减符号&#xff0c;其余的运算符必须加“.” >> a 1:5a 1 2 3 4 5>> a-2 %减法ans -1 0 1 2 3 >> 2.*a-1 %乘法 减法ans 1 3 5 7 9 >&g…
阅读更多...
Oracle最新的Java 8更新破坏了您的工具-它是如何发生的？

Oracle最新的Java 8更新破坏了您的工具-它是如何发生的？

如果您最近一直在关注Java世界的消息&#xff0c;那么您可能听说过Oracle发布的最新Java 8构建&#xff0c;Java 8u11&#xff08;和Java 7u65&#xff09;引入了错误并破坏了一些流行的第三方工具&#xff0c;例如ZeroTurnaround的JRebel&#xff0c;Javassist&#xff0c;Goo…
阅读更多...
为什么选择Dojo - 记Dojo中文博客正式开张

为什么选择Dojo - 记Dojo中文博客正式开张

公告栏里写到&#xff1a;Dojo的高门槛一旦跨过&#xff0c;必将别无所求。含义有二&#xff1a;第一&#xff0c;Dojo难学&#xff1b;第二&#xff0c;Dojo很强大。 这也揭示了本博客的目标&#xff1a;帮助大家用好Dojo这个优秀的Ajax框架。 在回答为什么选择Dojo之前&#…
阅读更多...
ExtJS 4.2 第一个程序

ExtJS 4.2 第一个程序

本篇介绍如何创建一个ExtJS应用程序。并通过创建目录、导入文件、编写代码及分析代码等步骤来解释第一个ExtJS程序。 目录 1. 创建程序 1.1 创建目录建议 1.2 实际目录 1.3 index.html 1.4 运行图 2. 代码分析 2.1 Ext.onReady() 2.2 Ext.create() 1. 创建程序 1.1 创建目录…
阅读更多...
ZooKeeper，策展人以及微服务负载平衡的工作方式

ZooKeeper，策展人以及微服务负载平衡的工作方式

Zookeeper如何确保每位工人都能愉快地从工作委托经理那里得到一些工作。 Apache ZooKeeper是注册&#xff0c;管理和发现在不同计算机上运行的服务的工具。 当我们必须处理具有许多节点的分布式系统时&#xff0c;它是技术堆栈中必不可少的成员&#xff0c;这些节点需要知道其…
阅读更多...
elementUI清空弹框中的表单数据

elementUI清空弹框中的表单数据

点击此处直达应用场景示例 官网&#xff1a;https://element.eleme.cn/#/zh-CN/component/form 补充&#xff1a;改变表头颜色&#xff1a; <el-table :data"tableData" border style"width: 100%" :header-cell-style"{background:#d3dce6,col…
阅读更多...
（一）PHP基础知识考察点

（一）PHP基础知识考察点

1&#xff0c;PHP引用变量的考察点&#xff1a; 概念&#xff1a;引用就是用不同的名字访问同一个变量内容。 定义方式&#xff1a; 使用&符号。 PHP引用变量的工作原理 这里有个COW copy on write 用zval&#xff08;&#xff09;去查看空间占用情况以及引用情况。 unse…
阅读更多...
.Net4.0 Parallel编程（三）Data Parallelism下

.Net4.0 Parallel编程（三）Data Parallelism下

在上篇文章中介绍了如何Break、Stop循环&#xff0c;以及如何定义线程局部变量。在本文中介绍如何在外部去取消循环、以及异常的处理。 Cancel 在并行的循环中支持通过传递ParallelOptions参数中的CancellationToken进行取消循环的控制&#xff0c;我们可以CancellationTokenSo…
阅读更多...
节点的运用和方法

节点的运用和方法

JQUERY的父&#xff0c;子&#xff0c;兄弟节点查找方法 jQuery.parent(expr) 找父亲节点&#xff0c;可以传入expr进行过滤&#xff0c;比如$("span").parent()或者$("span").parent(".class") jQuery.parents(expr),类似于jQuery.parents(ex…
阅读更多...
git仓库创建后，由主支变成开发分支

git仓库创建后，由主支变成开发分支

阅读更多...
Java：使用终止信号确定数据导入的状态

Java：使用终止信号确定数据导入的状态

几周前&#xff0c;我正在尝试将约6000万位数据最初导入Neo4j&#xff0c;但我们一直遇到一个问题&#xff0c;即导入过程似乎停滞了&#xff0c;什么也没导入。 很难分辨该过程中发生了什么—采取线程转储只是告诉我们它正在尝试处理CSV行中的一行&#xff0c;并且以某种方式…
阅读更多...
根据可视窗口判断面板向上还是向下展开

根据可视窗口判断面板向上还是向下展开

本demo以element-ui框架为视图模板~ HTML代码 JS代码 CSS代码 转载于:https://www.cnblogs.com/dreamsqin/p/10885502.html
阅读更多...
关于几本模拟IC设计书

关于几本模拟IC设计书

1.P.R.Gray的书　　这本书被业界誉为模拟IC的Bible&#xff0c;盛名之下&#xff0c;必无虚士。现在已经出到第四版&#xff0c;作者无一例外是业界大牛&#xff0c;该书论述严谨&#xff0c;思路清晰&#xff0c;对电路分析透彻&#xff0c;定义严格明确&#xff0c;无愧Bible…
阅读更多...
编写JUnit测试的另一种方法（Jasmine方法）

编写JUnit测试的另一种方法（Jasmine方法）

最近&#xff0c;我为一个小型个人项目编写了很多Jasmine测试。 我花了一些时间才终于感到正确地完成了测试。 此后&#xff0c;当我切换回JUnit测试时&#xff0c;我总是很难过。 出于某种原因&#xff0c;JUnit测试不再那么好&#xff0c;我想知道是否有可能以类似于Jasmine的…
阅读更多...
H5 input输入限制最大位数，和调用小键盘需求发生冲突的解决办法

H5 input输入限制最大位数，和调用小键盘需求发生冲突的解决办法

首先&#xff0c;限制输入最大位数时&#xff0c;input有自带的属性maxlength。 <input type"text" name"email" maxlength"55" /> 使用方法&#xff1a;maxlength"位数" 但是&#xff0c;对于这个属性他是有自己的限制条件的 …
阅读更多...
解决vue项目在ie浏览器中不显示的问题

解决vue项目在ie浏览器中不显示的问题

安装 “babel-polyfill” npm install babel-polyfill --save-dev 或者 cnpm install babel-polyfill --save-dev在入口 main.js 文件引入&#xff1a;import babel-polyfill在 build 文件下的 webpack.base.conf.js 文件中修改代码&#xff1a; entry: {app: ["babel-p…
阅读更多...
Spark-Luanch Driver

Spark-Luanch Driver

1.SparkSubmit.scala主要调用M-prepareSubmitEnvironment&#xff0c;该方法更根据用户定义的参数&#xff0c;匹配不同client&#xff0c;去调用不同clientApp。(ps&#xff1a;本次讲ClientApp 也就是standalone)在M-runMain通过 调用M-Utils.classForName 反射的方式调用 …
阅读更多...
大风大浪大鱼

大风大浪大鱼

一群年轻人常在一泓深潭边钓鱼&#xff0c;而有一个渔夫总是在潭上边水流湍急的河里捕鱼。 年轻人觉得这渔夫可笑&#xff0c;在大风大浪的河里怎么会捕到鱼呢?有一天&#xff0c;年轻人忍不住去问渔夫&#xff1a;“鱼能在这么湍急的地方停留吗?”渔夫说&#xff0c;当然不能…
阅读更多...
清空表单时出现问题

清空表单时出现问题

打开页面时报警告&#xff1a; 解决办法&#xff1a; &#xff08;1&#xff09;npm i default-passive-events -S &#xff08;2&#xff09;main.js中加入&#xff1a;import ‘default-passive-events’ 参考&#xff1a;https://www.jianshu.com/p/23850d4cade8 出现原…
阅读更多...
JQuery Ajax 使用FormData上传文件对象

JQuery Ajax 使用FormData上传文件对象

FormData部分: 先new FormData对象 :let somedata new FormData(),然后将数据添加进去&#xff0c;这里我们使用append()进行添加。 这里举一个上传头像的例子&#xff1a; let token localStorage.token; let img $(".file")..get(0).files[0]; let somedat…
阅读更多...
最新文章

Copyright @ 2022~2023