要掌握：localStorage，組件封裝
????

emm，第一次上傳視頻轉gif的圖片，效果不咋好。。。
視頻轉gif 的軟件連接 http://www.zxt2007.com/downloads.html
找到一個可以截取部分視頻制作gif圖的軟件https://soft.onlinedo.cn/gif/

在 components 下新建一個 curmbs 文件夾，并在該文件夾下新建一個 index.vue 文件。

router.js 中的配置，添加一個 meta對象

代碼

<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>

注冊

如果想要一部分頁面顯示該組件，一部分不顯示，那么需要用到 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表示不顯示面包屑

如果想要將左側主導航欄也顯示出來，則添加代碼：
原代碼：

<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>

總結

以上是生活随笔為你收集整理的element实现动态路由+面包屑的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。