问题描述：

刚开始的时候我的基本思路是在登录后调用后台获取菜单列表的接口然后添加到路由里面去，同时把菜单数据存到store里面，在进入首页之后从store里取出来生成左侧菜单列表。然而，当我把代码写完之后，发现当页面刷新时候，页面就空白了，蛋疼

查找资料分析原因：

这个的根本原因是没有做路由的持久化，而且页面刷新之后store里面的数据也清空了。为了解决上述问题，我就在登录后获取到的菜单数据列表存在localstorage里

实现思路：

先写个默认配置路由

const router = new Router({
    routes: [
        {
            path: '/login',
            name: 'login',
            component: () => import('../components/Login.vue')
        },
        {path: '/', redirect: '/home'},
    ]   
})

在动态添加路由的过程中，如果有 404 页面，一定要放在最后添加，否则在登陆的时候添加完页面会重定向到 404 页面。吃了很大的亏，看来对路由还是不熟，要加深印象

接收后端返回的路由信息，当然不要指望后端按照你的路由表完全对比着发过来，考虑到路由性能，component异步加载的方式后端是给不出来的，（后台小哥哥不开面啊，没办法，自己搞，他这么跟我说的）

基本思路：在这之前，前端要把所有的页面路由写好，在Router.beforeEach做判断，如果缓存里面有路由信息，就从缓存里拿，如果缓存没有，发请求获取路由表并localstorage存储起来并交由vuex管理（我处理后端给的路由业务逻辑在vuex里写的）。然后通过addRoutes方法合并之前的路由，千万不要忘了404页面要最后push，最后退出的时候清楚缓存，至此，抽根烟，解心宽