动态添加了路由，为什么访问时是空白?

Question

目前用下面的代码动态添加了一个/home的路由：

router.beforeEach(async (to, from, next) => {
    const accessRoutes = await store.dispatch("permission/generateRoutes", []);
    router.addRoutes(accessRoutes);

    next(); //在浏览器地址栏输入localhost/home访问到的是空白页面
})

对应的action：

const mutations = {
  SET_ROUTES: (state, routes) => {
    state.addRoutes = routes;
    state.routes = constantRoutes.concat(routes);
  }
};

const actions = {
  generateRoutes({ commit }, route) {
    return new Promise(resolve => {
      let accessedRoutes;
      let dtRoutes = {
        path: "/",
        component: Layout,
        redirect: "/home",
        children: [
          ...baseRouters,
          ...route,
          {
            path: "/404",
            component: resolve => require(["@/views/error-page/404"], resolve),
            hidden: true
          }
        ]
      };
      accessedRoutes = [
        dtRoutes,
        {
          path: "*",
          redirect: "/404",
          hidden: true
        }
      ];

      commit("SET_ROUTES", accessedRoutes);
      resolve(accessedRoutes);
    });
  }
};

请问这是什么原因造成的，是我的使用方法错了吗，求指导