javascript - 动态路由 NuxtJS

Question

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

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

知道我该怎么做吗？

标签： javascriptnuxt.js

Answer 1

Docks 建议顶级动态路由可以正常工作。查看_slug示例中的文件夹。

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

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

在你的你将可以通过对象index.vue访问product参数（查看这个答案以获取更多详细信息），因此，它可以包含如下内容：$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等等。