vuex刷新之后数据丢失

我们在使用vuex的时候，明明已经修改了state状态值，但是页面刷新之后就丢失了，这是因为vuex里的数据是保存在运行内存中的，当页面刷新时，页面会重新加载vue实例，vuex里面的数据就会被重新赋值。

解决办法：

• 1.使用localStorage进行本地持久化存储

       orderList(s, d) {
         s.orderList= d;
         window.localStorage.setItem("list",jsON.stringify(s.orderList))
       },  
       menuList(s, d) {
         s.menuList = d;
         window.localStorage.setItem("list",jsON.stringify(s.menuList))
      },
  }

• 2.利用第三方库进行持久化存储

const store =newVuex.Store({
　　state: {
　　　　count: 1
　　},
　　mutations: {},
　　actions: {},
　　// 当state中的值发生改变，此时localStorage中的vuex的值会同步把state中的所有值存储起来，当页面刷
　　　新的时候，state的值会从localStorage自动获取vuex的value值，赋值到state中
　　plugins: [createPersistedState()] 
})

router params传参刷新页面后参数丢失

解决办法：

• 1. 使用sessionStorage进行存储(因为页面关闭自动删除)进行存储参数

var params = this.$route.params; 
sessionStorage.setItem("paramsData", JSON.stringify(params));

• 2.使用动态路由 在router.js中设置路由

const routes = [
  {
    path: '/view1/:name/:idno',
    name: 'view1',
    component: () => import( '../admin/view1.vue')
  },
]

keep-alive 三级路由无法缓存

原因： 如果多级路由的话，一般会有一个空白的router-view页面做为公共的模板充当中间的嵌套路由/页面；当你切换不同的页面，中间公共部分的组件，一会儿缓存，一会儿不缓存，因为是公共组件，导致了最终的页面缓存失效。

解决办法：那么我们就需要在注册之前，将树形结构的三级或更多级转换位二级路由；

function generateFlatRoutes(accessRoutes) {
            let flatRoutes = [];

            for (let item of accessRoutes) {
              let childrenFflatRoutes = [];
              if (item.children && item.children.length > 0) {
                childrenFflatRoutes = castToFlatRoute(item.children, "");
              }

              // 一级路由是布局路由,需要处理的只是其子路由数据
              flatRoutes.push({
                name: item.name,
                path: item.path,
                component: item.component,
                redirect: item.redirect,
                children: childrenFflatRoutes
              });
            }

            return flatRoutes;
}
          /**
           * 将子路由转换为扁平化路由数组（仅一级）
           * @param {待转换的子路由数组} routes
           * @param {父级路由路径} parentPath
           */
 function castToFlatRoute(routes, parentPath, flatRoutes = []) {
            for (let item of routes) {
              if (item.children && item.children.length > 0) {
                if (item.redirect && item.redirect !== 'noRedirect') {
                  flatRoutes.push({
                    name: item.name,
                    path: item.path,
                    redirect: item.redirect,
                    meta: item.meta
                  });
                }
                castToFlatRoute(item.children, parentPath + "/" + item.path, flatRoutes);
              } else {
                flatRoutes.push({
                  name: item.name,
                  path: item.path,
                  component: item.component,
                  meta: item.meta
                });
              }
            }
　　return flatRoutes;
}
let lastAroutes = generateFlatRoutes(aRouter);