vue.js - 使用vuex+vue-router的时候，刷新后报错

问题描述

问 题

场景：做后台的dashboard，使用element+vue+vuex+vue-router。就是一般的后台管理系统
已实现：登录后跳转首页，动态增加菜单和addRoutes。菜单可点。刷新后从localstorage里面获取token，个人信息等。刷新后菜单和个人信息添加到vuex的store。
问题：刷新后，addRoutes添加的路由失效，访问的时候报错

vue.common.js?e881:560 [Vue warn]: Error in beforeCreate hook: 
(found in <Dashboard> at H:\xxx\src\pages\common\dashboard.vue)

TypeError: Cannot read property 'call' of null

[Vue warn]: Failed to mount component: template or render function not defined. 
(found in <Dashboard> at H:\xxx\src\pages\common\dashboard.vue)

routes.js里面只有404和login，可以正常访问。

部分关键代码：
webpack

  resolve: {
    extensions: ['', '.js', '.vue', '.json'],
    fallback: [path.join(__dirname, '../node_modules')],
    alias: {
      'vue$': 'vue/dist/vue.common.js',
      'src': path.resolve(__dirname, '../src'),
      'assets': path.resolve(__dirname, '../src/assets'),
      'components': path.resolve(__dirname, '../src/components')
    }
  }

app.js:

if (!store.accessToken && localStorage.getItem('accessToken')) {
  store.commit('ADD_MENU', JSON.parse(localStorage.getItem('menu')))
  store.commit('ADD_ACCESSTOKEN', localStorage.getItem('accessToken'))
  store.commit('ADD_REFRESHTOKEN', localStorage.getItem('refreshToken'))
  store.commit('ADD_USER', JSON.parse(localStorage.getItem('user')))
  router.addRoutes(store.state.menu.items)
}

router.beforeEach((to, from, next) => {
  // console.log(to)
  let accessToken = localStorage.getItem('accessToken')
  if (to.path !== '/login') {
    if (!accessToken) {
      return next({
        path: '/login'
      })
    }
  }else if(to.path === '/login' && accessToken){
    return next({
      path: from.path
    })
  }
  next();
});

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

各种百度google之后，说是需要改webpack和new Vue的时候加render，我仔细看了一下，我都有。所以问题应该不是出在 独立构建vs运行时构建。stackoverflow和vue-router的issue里多半都是这个答案。
我的问题是刷新后才会出现，一开始加载时没问题的。只要不刷新，都是正常。
我的对应是在app.js里面，判断如果store里面没有token，localstorage里面有，说明是刷新，不是正常退出，我就去从localstorage里面取各种信息，存到vuex的store里面，并且addroutes。我也尝试了直接更改加载的routes.js文件，console出来之后，显示已经改了，但是还是会报同样的错。

谁来救救我。。。。。

解决方案

谢谢，已解决，追了好久的错。
我把请求回来的menu存到localstorage里面之后，render这个方法就没有了。
恩，看来component是不能存到localstorage里面的。
所以之后类似的刷新页面的请求，我都写成了重新请求服务器。
localstorage里面只存token了。

这篇关于vue.js - 使用vuex+vue-router的时候，刷新后报错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！