如何在没有URL中没有ID的情况下创建NUXT动态路由

Question

通常在NUXT中为博客文章等创建动态路由时，我会做以下结构之类的事情。

pages目录<

• /strong pages/
• pecages /posts/index.vue
• pages/ports/_category/
• pages/posts/_category/index.vue
• pages/posts/_category/_sub-category/
• pages in /_sub-category/_id.vue

/pages/posts/_category/_sub-category/_id.vue

<template>
  <div>
    <h1>{{ title }}</h1>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    return {
      id: this.$route.params.id,
      all_posts: '',
      filtered_post: '',
      post_data: '',
      category: '',
      sub_category: '',
      title: ''
    }
  },

  mounted () {
    this.getSingle()
  },

  methods: {

    getSingle () {
      axios.get('someapiendpoint')
        .then((response) => {
          // get response data
          this.all_posts = response.data
          // filter response data by id
          this.filtered_post = this.all_posts.filter(post => post.id === this.id)
          // get data from index [0]
          this.post_data = this.filtered_post[0]
          // set data vars
          this.category = this.post_data.category
          this.sub_category = this.post_data.sub_category
          this.title = this.post_data.title
        })
    }

  }

}
</script>

nuxt.config.js

generate: {
    routes () {
      return axios.get('https://someapiendpoint').then((res) => {
        return res.data.map((post) => {
          return {
            route: '/posts/' + post.category + '/' + post.slug + '/' + post.id,
            payload: (post)
          }
        })
      })
    }
  },

nuxt链接

<nuxt-link :to="{ path: '/posts/' + post.category + '/' + post.sub_category + '/' + post.id}" v-for="post in displayedPosts" :key="post.id">
    {{ post.title }}
</nuxt-link>

这将生成诸如

/posts/my-category/my-sub-catemory/my-article-title/12345

我的问题之类的路线，我的问题是如何从URL中删除ID并仍然获取数据基于ID，但使用类似于此的URL

/posts/my category/my-sub类别/my-article-title/

Answer 1

将ID保留在URL上并不是对SEO的真正好处。您只能通过slug而不是ID来过滤帖子，每个帖子都是唯一的。或者，如果您仍然想将ID用作过滤的密钥，则可以使用VUEX在单击时保存当前的发布ID。