Как реализовать красивые URL для параметров запроса с nuxt - PullRequest
Новая
       24

Как реализовать красивые URL для параметров запроса с nuxt

0 голосов
/ 14 июня 2019

В моем приложении NUXT я хочу иметь возможность переходить по таким URL-адресам:

'/catalog/catalog-section/page/1/sort/name/order/desc' и для моего vue-router обрабатывать этот URL-адрес следующим образом:

'/catalog/catalog-section?page=1&sort=name&order=desc'где он будет соответствовать маршруту '/catalog/:slug' и будет иметь доступ ко всем параметрам запроса.

  1. Я пытался использовать промежуточное программное обеспечение, как на стороне сервера, так и на стороне клиента, для анализа и преобразования URL-адреса.для моих нужд, но кажется, что они используют другой источник правды с точки зрения получения url (и разных маршрутизаторов в этом отношении - статический маршрутизатор и маршрутизатор браузера соответственно), server.js получает url из запроса, а клиент получает urlиз окна браузера.Это приводит к ситуациям, когда сервер возвращает правильный HTML-код с обработанными параметрами запроса, но клиенту не удается выполнить увлажнение, поскольку он пытается обработать исходный URL-адрес ('/ catalog / catalog-section / page / 1 / sort / name / order / desc')и отображает 404 страницы для большинства случаев

  2. Я пытался расширить свои стандартные маршруты с теми, которые ожидают другой набор параметров (страница, сортировка и т. д.). Основной недостатокэто потому, что вы не можете предсказать, какую комбинацию параметров вы получите (особенно когда дело касается фильтрации), и, таким образом, не сможете писать маршруты для них

серверпромежуточное программное обеспечение 

export default function (req, res, next) {  
  req.url = transformUrl(req.path) // nothing special, transforms '/products/test/1' to '/products/test?tab=1'
  next()
}

сервер корректно возвращает страницу, отображаемую с открытой вкладкой, но когда клиентская часть монтируется, он перерисовывается в своем состоянии по умолчанию

расширение маршрута 

router: {
    extendRoutes(routes, resolve) {
      routes.unshift({
        name: 'product-tab',
        path: '/products/:product?/:tab?/',
        component: resolve(__dirname, 'pages/products/_product.vue')
      })
    }
  },

Возможно, вы решили эту проблему в своем проекте или знаете git, у которого есть похожая проблема с реализованным решением, яБуду рад любой помощи.

...