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

【问题标题】：How to build SEO-friendly routes in NuxtJS?如何在 NuxtJS 中构建对 SEO 友好的路由？
【发布时间】：2020-08-10 12:17:05
【问题描述】：

我是 NuxtJS 的新手。我的页面由导航栏/菜单、列出所有文章的博客页面和几个大部分静态页面组成。（与大多数公司网站一样）

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

我必须做什么：

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

我想做的事：

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

最好的方法是什么？

【问题讨论】：

标签： vue.js nuxt.js server-side-rendering headless strapi

【解决方案1】：

您可以使用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
通过 query 命名为 id 这是您的单一条目 ID
获取查询 (id) 并使用查询 id 获取您的单个条目： const postId = this.$route.query.id

【讨论】：

【解决方案2】：

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

你的路线是这样的；

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

然后新建一个vue文件。

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

这样你也可以访问参数

【讨论】：