Nuxt.js 中的无限动态级别嵌套

Posted 2023-02-22

【中文标题】Nuxt.js 中的无限动态级别嵌套

【英文标题】：Infinite dynamic level nesting in Nuxt.js

【发布时间】：2018-10-01 18:02:31

【问题描述】：

我希望 nuxt.js 的路由完全动态，因为我无法预测用户和他对他想要的级别数量的偏好。

所以一个用户会创建一个这样的页面：http://localhost/parent/level-1/level-2/

还有其他人会这样做：http://localhost/parent/level-1/level-2/level-3/level-4/level-5/level-6/level-7/

nuxt.js 有没有办法处理这个无限嵌套的路由？

【参考方案1】：

你应该只能制作一个文件：

pages/_.vue

这将捕获与更具体的请求不匹配的任何请求。

但请注意，这会产生意想不到的后果。例如，您可能希望返回 404 错误等，并且使用此方法将始终导致匹配任何路由。这让开发人员决定如何处理丢失的页面。

【讨论】：

当我通过nuxtjs.org/guide/routing/#validate-route-params 验证参数时，我是否还必须处理 404 等？

【参考方案2】：

我正在回答我自己的评论——“如何根据给定的答案验证完全动态的 url——> 使用 _.vue，然后它会处理所有事情。 也许它对某人有帮助。

每当您在 validate 方法中 return false 时，向 _.vue 模板添加验证都会返回错误页面。 在我的情况下，我每页都有一个 api 端点，可以通过将以下内容添加到 _.vue 页面组件来验证完全动态的 url：

async validate( $axios, route ) 
    const url = getMyApiEndpointUrl(route.path)

    try 
        await $axios.$head(url)
        return true
     catch (e) 
        return false