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，一经查实，立即删除！

相关文章

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…
阅读更多...
.Net4.0 Parallel编程（三）Data Parallelism下

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

在上篇文章中介绍了如何Break、Stop循环&#xff0c;以及如何定义线程局部变量。在本文中介绍如何在外部去取消循环、以及异常的处理。 Cancel 在并行的循环中支持通过传递ParallelOptions参数中的CancellationToken进行取消循环的控制&#xff0c;我们可以CancellationTokenSo…
阅读更多...
git仓库创建后，由主支变成开发分支

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

阅读更多...
根据可视窗口判断面板向上还是向下展开

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

本demo以element-ui框架为视图模板~ HTML代码 JS代码 CSS代码 转载于:https://www.cnblogs.com/dreamsqin/p/10885502.html
阅读更多...
编写JUnit测试的另一种方法（Jasmine方法）

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

最近&#xff0c;我为一个小型个人项目编写了很多Jasmine测试。 我花了一些时间才终于感到正确地完成了测试。 此后&#xff0c;当我切换回JUnit测试时&#xff0c;我总是很难过。 出于某种原因&#xff0c;JUnit测试不再那么好&#xff0c;我想知道是否有可能以类似于Jasmine的…
阅读更多...
解决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…
阅读更多...
清空表单时出现问题

清空表单时出现问题

打开页面时报警告&#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 出现原…
阅读更多...
如何在JSF中实现自定义密码强度指示器

如何在JSF中实现自定义密码强度指示器

使用JavaScript验证密码强度是一项常见任务。 在本文中&#xff0c;我将展示如何向基于JSF的Web应用程序添加密码强度指示器。 的 PrimeFaces中的密码组件已经具有密码强度的反馈指示符&#xff0c;但是它有两个主要缺点&#xff1a; 反馈指示器没有响应&#xff08;固定宽度…
阅读更多...
关于vue打包的问题

关于vue打包的问题

一、vue-cli2 二、vue-cli3 一、vue-cli2 错误提示&#xff1a; npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! hewelry1.0.0 build: node build/build.js npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the hewelry1.0.0 build script. npm ERR! This is prob…
阅读更多...
html笔记（一）html4+css2.0、css基础和属性、盒模型

html笔记（一）html4+css2.0、css基础和属性、盒模型

w3c 官网 这里是 html4 的内容 大标题小节一、关于HTML1. 基本语法2. HTML常用标签3. 相对路径和绝对路径二、css基础1. 表单元素2. 创建样式表3. css语法4. css选择器三、css的相关属性1. 列表 li 独有的属性list-style2. 边框属性border3. overflow4. 浮动 float 遇到的坑5.…
阅读更多...
返回顶部小火箭

返回顶部小火箭

代码如下&#xff1a; <!DOCTYPE html> <html> <head lang"en"><meta charset"UTF-8"><title></title><style>body {width: 2000px;}.top{position: fixed;right:50px;bottom:100px;display: none;}</style&…
阅读更多...
最佳5本Java性能调优书籍–精选，必读

最佳5本Java性能调优书籍–精选，必读

为什么Java开发人员应该阅读有关性能调优的书&#xff1f; 当我很久以前第一次面对这个问题时&#xff0c;我以为以后会做&#xff0c;但是我很长一段时间都没有回过头来。 仅当我在用Java编写的任务关键型服务器端财务应用程序中遇到严重的性能和可伸缩性问题时&#xff0c;我…
阅读更多...
html笔记（三）html5+css3（html5、css3、文字相关）

html笔记（三）html5+css3（html5、css3、文字相关）

W3school在线教程 html5css3基本不兼容ie678。 大标题小节一、html51. html4 和 html5 的区别2. 标签语义化3. 智能表单的使用和规范二、css3选择器1. 属性选择器2. 结构性伪类选择器&#xff08;层级选择器/符&#xff09;3. UI状态性伪类选择器4. 相邻兄弟选择器5. 其他选择…
阅读更多...
美登杯 E、小花梨的数组* 线段树

美登杯 E、小花梨的数组* 线段树

操作过程中标记传递 询问的时候再计算 #include<bits/stdc.h> using namespace std; //input by bxd #define rep(i,a,b) for(int i(a);i<(b);i) #define repp(i,a,b) for(int i(a);i>(b);--i) #define RI(n) scanf("%d",&(n)) #define RII(n,m) sc…
阅读更多...
怎么得到scrollTop

怎么得到scrollTop

我们学习一个事件 &#xff1a; 页面滚动效果 window.onscroll function() { 页面滚动语句 } 谷歌浏览器 和没有声明 DTD <DOCTYPE > &#xff1a; document.body.scrollTop; 火狐 和其他浏览器 document.documentElement.scrollTop; ie9 和 最新浏览器…
阅读更多...
console.log打印没有效果

console.log打印没有效果

今天用谷歌调试的时候&#xff0c;遇到了一个很奇怪的现象&#xff0c;console.log() 完全不出效果&#xff0c;把它放到script下的第一行也没有用。然后借鉴了几个博主的。 直接改 https://blog.csdn.net/wujy_rrycbar2016/article/details/78341973 打开控制台 -> 改为 D…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023