mutation.js程式碼：

changeRoute(state,val) {
    let routeList = state.routeList;
    let isFind = false;
    let findeIdex = 0;

    //選單欄和下拉的二級選單
    if (val['type'] == 'header' || val['type'] == 'secondHeader')   {
      routeList.length = 0;
      //頂級選單清除快取
      localStorage.removeItem("routeList");
    }
    let routes = routeList;
    let localStorageList = localStorage.getItem('routeList');
    if (localStorageList) {
      //當前頁重新整理,使用快取資料
      routes = JSON.parse(localStorageList as any);
    }
    //遍歷是否有存入當前路由位置
    for (let i = 0; i < routes.length; i++) {
      isFind = routes[i]['name'] == val['name'];
      if (isFind) {
        findeIdex = i;
        break;
      }
    };
    if (isFind) {
      //有的話，清除當前路由以後的資料
      routes.splice(findeIdex + 1,routes.length - findeIdex - 1);
      //修改快取
      localStorage.setItem('routeList',JSON.stringify(routes));
    } else {
      //存入全域性變數
      routes.push(val);
      //設定快取
      localStorage.setItem('routeList',JSON.stringify(routes));
    }
  }

頁面使用：

//獲取麵包屑快取
  let localStorageList1 = localStorage.getItem('routeList');
  //ts寫法 as any
  this.routeList = JSON.parse(localStorageList1 as any) 
   ? JSON.parse(localStorageList1 as any)
   : { name: 'test',url: '/test' };

知識點：

1、localstorage

2、JSON.stringify()的作用是將 JavaScript 值轉換為 JSON 字串，JSON.parse()將JSON字串轉為一個物件

補充知識：vue+elementUI動態生成麵包屑導航

專案需要動態生成麵包屑導航,並且首頁可以點選.其餘為路徑顯示

<el-menu :unique-opened="true" router :default-active="$route.path" @select="handleSelect">
    <div class="user-menu-box" v-for="menu in menus" :key="menu.id">
      <el-menu-item v-if="!menu.child" :index="menu.path">
        <icon :name="menu.icon" :w="20" :h="20"></icon>
        <span slot="title" v-text="menu.name"></span>
      </el-menu-item>
      <el-submenu v-if="menu.child" :index="menu.path">
        <template slot="title">
          <icon :name="menu.icon" :w="20" :h="20"></icon>
          <span slot="title" v-text="menu.name"></span>
        </template>
        <el-menu-item-group>
          <el-menu-item v-for="subMenu in menu.child" :key="subMenu.id" v-text="subMenu.name"
            :index="subMenu.path"></el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </div>
</el-menu>

上面的程式碼是elementUI元件的樣式,根據專案需要做了修改,搬運的時候根據專案自己改改

export default {
  data () {
    return {
      activeMenu: '',indexBreadcrumbs: [],menus: [{
        id: '1',name: '門戶管理',icon: 'menhuguanli',path: '#2',child: [{
          id: '1-1',name: '輪播圖',path: '/backstage/protaManage/turns'
        },{
          id: '1-2',name: '基礎資料',path: '/backstage/protaManage/basis'
        },{
          id: '1-3',name: '分類管理',path: '/backstage/protaManage/classify'
        },{
          id: '1-4',name: '內容釋出',path: '/backstage/protaManage/content'
        }]
      },{
        id: '2',name: '我的雲盤',icon: 'yunpan',path: '/backstage/yunManage'
      },{
        id: '3',name: '管理選單',icon: 'shezhi',path: '/backstage/menusManage'
      },{
        id: '4',name: '編輯板塊',icon: 'fabuzhongxin',path: '/backstage/editPlate'
      }]
    }
  },watch: {
    $route () {
      this.handChange()
    }
  },computed: {
    breadcrumbList () {
      let breadcrumbs = []
      let menuList = this.menus
      this.indexBreadcrumbs.map(item => {
        for (let i = 0; i < menuList.length; i++) {
          if (item === menuList[i].path) {
            breadcrumbs.push(menuList[i])
            if (menuList[i].child) {
              menuList = menuList[i].child
            }
            break;
          }
        }
      })
      return breadcrumbs
    }
  },methods: {
    handChange () {
      this.$emit('hand-change',this.breadcrumbList)
    },handleSelect (index,indexPath) {
      this.indexBreadcrumbs = indexPath
    }
  },created () {
    this.handChange()
  }
}

上面的程式碼是模擬的資料,呼叫elememtUI的元件導航選單的中的@select方法,有兩個引數,可以自行列印

然後在computed中計算當前選中的是哪一部分,取到返回值,然後$emit傳給父元件,

<el-breadcrumb separator-class="el-icon-arrow-right">
   <el-breadcrumb-item :to="{ path: '/backstage' }">首頁</el-breadcrumb-item>
   <el-breadcrumb-item v-for="o in breadcrumbList" :key="o.id">{{o.name}}
   </el-breadcrumb-item>
 </el-breadcrumb>

父元件中取到子元件傳過來的值後,直接渲染就行了

以上這篇vue 使用localstorage實現麵包屑的操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。