问题描述:
当我们在编写动态路由时,常常会遇到第一次进入页面时可以正常展示,但是一旦刷新页面就会空白不显示的问题。
出现这种现象的问题是因为当页面刷新时,vuex数据丢失,不管是store中储存的数据亦或是动态添加路由的步骤都会丢失。
router.addRoute(root)
因此要解决这个问题,我们必须在刷新页面之后重新执行动态添加路由这一步骤。
解决方案:
在router/index.js中导入store,然后通过commit执行store中的activeRouter方法,进行重新动态添加路由的操作。
import store from '../store'
store.commit('activeRouter')
const mutations = {
activeRouter(state) {
router.addRoute(root)
}