URL 如何创建没有ID的Nuxt动态路由

Question

通常在 Nuxt 中为博客 post 之类的东西创建动态路由时，我会做类似以下结构的事情。

页面目录

pages/posts/
pages/posts/index.vue
pages/posts/_类别/
pages/posts/_类别/index.vue
pages/posts/_类别/_子类别/
pages/posts/_类别/_子类别/_id.vue

/pages/posts/_类别/_子类别/_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-category/my-article-title/12345

我的问题是如何从 URL 中删除 ID 并仍然根据 ID 获取数据，但使用这样的 URL

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

Answer 1

将 id 保留在 URL 上对 SEO 并不是很好。您只能通过 slug 而不是 ID 来过滤 posts，每个 post 的 slug 都是唯一的。或者如果你仍然想使用 ID 作为键来过滤，你可以使用 Vuex 在点击时保存当前 post ID。

URL 如何创建没有ID的Nuxt动态路由

How to create Nuxt dynamic routing without the ID in the URL

javascript

vue.js

axios

nuxt.js