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,breadNumber
      var newName = this.$route.name;
      var newPath = this.$route.fullPath;
      var newBreadNum = this.$route.meta.breadNumber;   

      // 2.获取前一页存下的name,path,breadNumber
      var 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的值，并且重新赋值给levelList
        if(this.levelList.length != 0 ){
   
          localStorage.removeItem("oldName")