时间戳

首页 > 解决方案 > 如何在 NuxtJS 中构建对 SEO 友好的路由？

vue.js - 如何在 NuxtJS 中构建对 SEO 友好的路由？

问题描述

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

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

我必须做的：

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

我想做的事：

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

最好的方法是什么？

标签： vue.jsnuxt.jsserver-side-renderingheadlessstrapi

解决方案

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

推荐阅读