动态路由 NuxtJS

Posted 2023-02-22

【中文标题】动态路由 NuxtJS

【英文标题】：Dynamic Routes NuxtJS

【发布时间】：2020-09-07 10:23:52

【问题描述】：

我想知道如何在 nuxtjs 中重命名路由。

特别是，我有一个名为 products 的文件夹，其中包含 _id.vue 和 index.vue 文件。但是，我不希望路由是 www.mysite.com/products/productID，而是 www.mysite.com/productID。也就是说，我想从路由中移除产品。

知道我该怎么做吗？

【参考方案1】：

Docks suggest that top-level dynamic routes will work fine。查看示例中的_slug 文件夹。

因此，以下文件夹结构有效：

pages
--| _product/
-----| index.vue

在您的index.vue 中，您可以通过$route 对象（check this answer for more details）访问product 参数，因此，它可以包含如下内容：

<!-- pages/_product/index.vue -->
<template>
    <div class="flex items-center justify-center text-center py-20">
         $route.params.product 
    </div>
</template>

<script>
export default 
</script>

我已经对此进行了测试，并且可以正常工作。如果进行此设置，您将转到www.mysite.com/shampoo/，您将看到shampoo 出现在屏幕上，如果您转到www.mysite.com/r2-d2/，您将看到r2-d2，依此类推。

【讨论】：

是的，我在 pages 文件夹下有一个 products 文件夹，在那个产品中我有 index 和 _product 文件......我想要的是从 url 中删除 /products 并只留下 productID 以便网址就像这个 websie/productID 而不是 website/products/productID

@oussemasallemi 我已经用更清晰的解释和示例更新了答案

对不起，我试过了，但没有成功，谢谢你花时间考虑

@oussemasallemi 感谢您的礼貌反馈！ :) 我花了一些时间来测试我提出的结构并且它有效。我已经更新了答案，以更好地说明如何使用它。