Как убить URL с помощью Vuejs - PullRequest
Новая
       5

Как убить URL с помощью Vuejs

0 голосов
/ 11 ноября 2018

Я создаю сайт с несколькими статьями. Я использую Vue Router, и на данный момент URL моих статей выглядят как / article / id, например: http://localhost:8080/article/85.

Как добавить URL с заголовком статьи, например, http://localhost:8080/article/the-article-title?

Я понятия не имею, какой код я должен предоставить, поэтому вот мой маршрут статьи: 

routes: [
 {
   path: '/article/:id',
   component: require('../components/articlePage.vue').default,
   name: 'article',
   meta: {title: "article"}
  }, 
]

1 Ответ

0 голосов
/ 11 ноября 2018

Существуют различные подходы с возрастающим уровнем сложности и аспектами, о которых заботятся.

Итак, для начала - чтобы slug -выделить статьи, вы должны ввести слагов в приложение. Поскольку в комментариях упоминается, что все статьи извлекаются ранее, слагы могут быть добавлены к данным каждой статьи перед сохранением их в хранилище с пользовательской функцией, которая преобразует слова в kebab-case или одну из вспомогательных библиотек (например, dashify ).

Это позволит отобразить список ссылок на статьи, используя :slug в качестве маршрута param вместо id и выполнить поиск в хранилище по param перед отображением страницы статьи. Хорошо, что все еще можно сохранить обе опции (slug и id) доступными, расширив логику для поиска на 2 поля.

В зависимости от вашей цели - это может быть. Но проблема возникает в том случае, если название статьи было изменено и пользователь получает доступ к статье через внешне сохраненную ссылку (доступную в социальных сетях, проиндексированную поисковыми системами и т. Д.). Это побеждает SEO .

Чтобы статья была доступна, рекомендуется добавить slug в качестве обязательного поля в серверную часть. Слаг еще может быть сгенерирован тем же способом, но в CMS - до того, как статья будет сохранена в базе данных. В таком случае его можно дважды проверить, отредактировать вручную (поскольку слагы не всегда представляют полный заголовок статьи из-за длины символов, специальных символов и т. Д.) И быть доступным для запросов, что устраняет необходимость манипулирования строками из внешнего интерфейса.

Также создаются параметры для настройки перенаправления 301 для сохранения индексации даже после изменения slug путем сохранения старых слагов. Но это выходит за рамки текущего вопроса, хотя это хорошая практика.

...