标签：缓存 404 菜单 store 刷新 路由 页面

问题描述：

刚开始的时候我的基本思路是在登录后调用后台获取菜单列表的接口然后添加到路由里面去，同时把菜单数据存到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，最后退出的时候清楚缓存，至此，抽根烟，解心宽


标签：缓存,404,菜单,store,刷新,路由,页面
来源： https://www.cnblogs.com/hugyfighting/p/14530347.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。