实际开发中的bug：用户登录后菜单正常跳转，但刷新后出现白屏问题。

完成动态添加路由后，解决一些白屏的问题。

复现：

当用户登录之后，菜单的跳转没问题，但是，当点击刷新的时候，会出现白屏的问题，即使在地址栏输入路由地址，也无法跳转到正常页面。

分析：

当前的菜单路由是在什么时候注册的？---- 是在登录的时候注册的：

// 把this.$router的实例传到store中，通过this.$router中addRoute方法去动态添加路由
this.$store.commit('addMenu', this.$router)

是在登录的时候调用mutations的addMenu方法，然后才进行注册。

就是在store的mutations中的addMenu方法里，获取菜单数据，在进行数据组装，生成路由数据，在调用router下的addRoute方法动态添加路由。

当页面刷新后，就不会走到addMenu这个方法里面了。

当页面刷新时，整个vue实例会初始化： 

// ~main.js:
new Vue({
   router,
   store,
   render: h => h(App)
}).$mount('#app')

初始化之后并没有走登录的逻辑，所以没显示也正常。 

解决： 

在当前vue实例初始化的时候，调用store中的 addMenu 方法即可。

也就是在main.js中，初始化的时候，通过生命周期函数created，去调用store中的 addMenu 方法，传递 router过去即可：

// main.js中
new Vue({
   router,
   store,
   render: h => h(App),
   created: () => {
         store.commit('addMenu', router)
   }
}).$mount('#app')

因为初始化vue实例的时候，在created生命周期里面调用了addMenu方法，所以也会走到mutations的addMenu里面的逻辑，同样实现了路由的动态添加。白屏问题也就解决了。