如何使用 nuxt 动态路由将字符串添加到 url 的末尾

Question

出于 SEO 的目的，我想在动态路径的末尾添加一个字符串（产品标题、类别标题……）。 我的产品页面结构是这样的：

pages:

product (folder)
- _id.vue

所以为了显示产品单页，我使用 URL example.com/product/1 其中1 是产品 ID。 然后在 _id.vue 页面中获取我的产品：

async fetch(){
    let response = await this.axiosFetch(`product/${this.$route.params.id}`)
    if(this.resOk(response.status)){
        if(this.notEmpty(response.data)){
            this.product = response.data
        }
    }else{
        this.$nuxt.error({ statusCode: 404, message: "not found" })
    }
},

现在如上所述，我想在 url 末尾添加产品标题，例如 example.com/product/1/nike-shoe 我该怎么做？？

更新

还有一个问题不能仅通过 url 上的参数来解决： 我有一个类别页面example.com/category。在页面获取我获取这样的猫（在页面上创建 catId 是 0 来获取父母并且每个父母我获取孩子）：

async fetch(){
  let res = await this.$axios.$get(`category/${this.catId})
  this.catArray.push(res)
}

我从父 ID 中获取父级，获取子级并加载下面的父级等等。所有这些都在 example.com/category 中。没有路由更改仅将 catId 发送到路由查询（因此我可以使用 catId 从另一个页面导航）。那么如何在 url 末尾添加每个选定类别的标题并且仍然在同一页面中？？

Answer 1

您可以使用带有产品名称和末尾的id 的路由，并解析$route.params.id 以获取id。 为此，您需要使用slugify。

您的路线将如下所示： example.com/product/${slugifiedProductName}-${id}

例如：example.com/product/nike-shoe-1

在文件pages/product/_id.vue 中使用正则表达式提取id。

async fetch(){
    const id = this.$route.params.slug.match(/([0-9])+$/)[0]
    let response = await this.axiosFetch(`product/${id}`)
    if(this.resOk(response.status)){
        if(this.notEmpty(response.data)){
            this.product = response.data
        }
    }else{
        this.$nuxt.error({ statusCode: 404, message: "not found" })
    }
},

注意：如果使用 UUID，则正则表达式为 [0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$