Как построить оптимизированные для SEO маршруты в NuxtJS?

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

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

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

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

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

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

Как лучше всего это сделать?


strapi vue.js nuxt.js server-side-rendering headless
person Tim Ansink    schedule 27.04.2020    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Вы можете использовать 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. Создать динамический маршрут - ›https://nuxtjs.org/guide/routing/#dynamic-routes
  2. Передайте query с именем id, который является вашим идентификатором единственной записи.
  3. Получите запрос (идентификатор) и получите свою единственную запись, используя идентификатор запроса: const postId = this.$route.query.id
person Enkhtulga Gantsagaan    schedule 27.04.2020

arrow_upward
-1
arrow_downward

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

и ваши маршруты вроде этого;

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

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

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

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

person erdidoqan    schedule 27.04.2020