如何在 NuxtJS 中构建对 SEO 友好的路由？

Question

我是 NuxtJS 的新手。我的页面由一个 navbar/menu 博客页面构成，其中列出了所有文章和几个主要是静态的页面。（与大多数公司网站一样）

我正在从 Strapi API 检索我的数据，我只能通过 ID 获取单个条目。

我要做的事情：

当用户点击导航栏 link 时，我需要将相应 article/post 的 ID 传递给文章组件，以便从 API 中检索文章。到目前为止它工作得很好，但是通过路由器参数来完成，一篇文章将有一个 URL 像 https://www.example.com/posts/63ndjk736rmndhjsnk736r

我想做的事情：

我想要一个带有 slug https://www.example.com/posts/my-first-Post 的 URL，并且仍然将 ID 传递给文章 component/page。

最好的方法是什么？

Answer 1

您可以在 pages 文件夹中使用 _slug.vue。

你的路线是这样的；

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

然后新建一个vue文件。

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

这样你也可以访问参数

Answer 2

您可以使用 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

您需要：

创建动态路由 -> https://nuxtjs.org/guide/routing/#dynamic-routes
传递名为 id 的 query，这是您的单个条目 ID
获取查询 (id) 并使用查询 id 获取您的单个条目： const postId = this.$route.query.id

如何在 NuxtJS 中构建对 SEO 友好的路由？

How to build SEO-friendly routes in NuxtJS?

headless

vue.js

server-side-rendering

strapi

nuxt.js