Question

我们有spa vuejs项目，页面类型很少，例如：首页，类别，产品，购物篮，结帐每个类别（或产品）都有唯一的url（用户友好的URL），因此我们应该向服务器发送请求以检查url的页面类型是什么。

我们找不到任何最佳做法或官方教程。为了解决这个问题，我们使用路由器钩子：beforeEach。

这是我们路由器实现的一部分：

import VueRouter from 'vue-router';

export default (routes) => {
  const router = new VueRouter({
    mode: 'history',
    routes: routes.filter(route => route.path === '*'),
  });

  router.beforeEach(async (to, from, next) => {
    if (to.name) {
      next();
      return;
    }

    const url = to.path;
    const { type: pageType, entity_id: entityId, redirect } = await RouteModel.getRoute({ url });

    if (redirect) {
      next(redirect);
      return;
    }

    if (pageType != null
      && routes.some(({ name }) => name === pageType)
    ) {
      router.addRoutes(
        routes
          .filter(route => route.name === pageType)
          .map(route => ({
            ...route,
            path: to.path,
            meta: { ...route.meta, pageType, entityId, storeId },
          })),
      );

      next({
        path: to.path,
        query: to.query,
      });

      return;
    }

    next();
  });

  return router;
};

我认为路由器应该支持这种基本功能。也许有人知道更好地解决此问题的更好方法？

Vue路由器通过服务器解析URL

0 个答案: