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

Question

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

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

我必须做什么：

[当用户单击导航栏链接时，我需要将相应文章/帖子的ID传递给文章组件，以便从API检索文章。到目前为止，它运行良好，但是通过路由器参数进行操作，则文章将具有类似https://www.example.com/posts/63ndjk736rmndhjsnk736r

的URL

我想做什么：

我想使用带有https://www.example.com/posts/my-first-Post的URL，但仍将ID传递给文章组件/页面。

什么是最好的方法？

Answer 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

您需要什么：

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

我希望它会有所帮助。

Answer 2

您可以在页面文件夹中像_slug.vue一样使用。

和您这样的路线；

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

然后创建一个新的vue文件。

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

这样您也可以访问参数