vue 使用localstorage實現面包屑

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字符串轉為一個對象