问题描述
我是NuxtJS的新手.我的页面由导航栏/菜单，列出所有文章的博客页面和几个静态页面组成(例如大多数公司网站)
Im a novice in NuxtJS. My page is structured with a navbar/menu, blog page with all articles listed and a couple of mostly static pages.(like most company websites)
我正在从Strapi API检索我的数据，在那里我只能通过其ID提取单个条目.
I am retrieving my data from a Strapi API, where I can only fetch single entries by their ID.
我必须做什么:
当用户单击导航栏链接时，我需要将相应文章/帖子的ID传递给文章组件，以便从API检索文章.到目前为止，它的运行情况还不错，但是通过路由器参数进行操作时，文章将具有https://www.example.com/posts/63ndjk736rmndhjsnk736r
When the user clicks on the navbar link, I need to pass the ID of the corresponding article/post to the article component in order to retrieve the article from the API. So far it is working quite well, but doing it via router params, an article will have an URL like https://www.example.com/posts/63ndjk736rmndhjsnk736r
我想做什么:
我希望有一个带有https://www.example.com/posts/my-first-Post的URL，并且仍将ID传递给文章组件/页面.
I would like to have an URL with a slug https://www.example.com/posts/my-first-Post and still pass the ID to the article component/page.
最好的方法是什么?
推荐答案
您可以使用query.这是一些示例:
You can use query. Here is some example:
我有一些数据:
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
Create dynamic Route -> https://nuxtjs.org/guide/routing/#dynamic-routes
Pass query named id which is your single entry ID
Get query (id) and fetch your single entry using query id:
const postId = this.$route.query.id