Как построить SEO-дружественные маршруты в Nuxt JS? - PullRequest
Новая
       142

Как построить SEO-дружественные маршруты в Nuxt JS?

0 голосов
/ 27 апреля 2020

Я новичок в Nuxt JS. Моя страница структурирована с помощью панели навигации / меню, страницы блога со всеми перечисленными статьями и парой в основном стати c страниц (как и большинство веб-сайтов компании)

Я получаю свои данные из API-интерфейса Strapi, где Я могу получить только отдельные записи по их идентификатору.

Что мне нужно сделать:

Когда пользователь нажимает на ссылку на панели навигации, мне нужно передать идентификатор соответствующая статья / запись в компоненте article для извлечения статьи из API. Пока что это работает довольно хорошо, но, делая это через параметры маршрутизатора, статья будет иметь URL-адрес типа https://www.example.com/posts/63ndjk736rmndhjsnk736r

Что я хотел бы сделать:

Я хотел бы иметь URL-адрес со слагом https://www.example.com/posts/my-first-Post и по-прежнему передавать идентификатор компоненту / странице статьи.

Какой лучший способ сделать это?

Ответы [ 2 ]

0 голосов
/ 27 апреля 2020

Вы можете использовать query. Вот пример:

У меня есть некоторые данные: 

data = [{id: "63ndjk736rmndhjsnk736r", name: "my-first-post"}, {id: "88ndjk736rmndhjsnk736r", name: "my-second-post"}]

В моем списке навигации: 

<template v-for="(item, index) in data" key="index">
    <router-link :to="{ path: '/posts/' + item.name, query: { id: 'item.id' }}"
    >{{item.name}}</router-link>
</template>

Как показывают ваши маршруты: 

http://example.com/posts/my-first-post?id=63ndjk736rmndhjsnk736r

Что вам нужно:

  1. Создать динамику c Маршрут -> https://nuxtjs.org/guide/routing/#dynamic -routes
  2. Пропуск query с именем id, который ваш идентификатор одной записи
  3. Получить запрос (идентификатор) и получить вашу единственную запись, используя идентификатор запроса: const postId = this.$route.query.id

Надеюсь, это поможет.

0 голосов
/ 27 апреля 2020

Вы можете использовать как _slug.vue в папке страниц.

и ваши маршруты, как это; 

{
  name: 'posts-slug',
  path: '/posts/:slug?',
  component: 'pages/posts/_slug.vue'
}

, затем создать новый vue файл. 

export default {
  validate ({ params }) {
    return /^\d+$/.test(params.id)
  }
}

таким образом, вы также можете получить доступ к параметру

...