動態路由頁面刷新空白了~~~

問題描述：

剛開始的時候我的基本思路是在登錄后調用后台獲取菜單列表的接口然后添加到路由里面去，同時把菜單數據存到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，最后退出的時候清楚緩存，至此，抽根煙，解心寬