动态路由NuxtJS

Question

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

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

知道我该怎么做吗？

Answer 1

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

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

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

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

<!-- 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等等。