程序员经验分享-hwhale

NuxtJS 带参数的嵌套路由

2024-01-04

https://dev.site.io/websites/1bbe6526-61c1-4077-8400-77a642580eac/apps/30620171-af2f-4e82-854e-2bb797c017d8

访问网站和应用程序 ID 的文件夹结构会是什么样子：

https://dev.site.io/websites/1bbe6526-61c1-4077-8400-77a642580eac/apps/30620171-af2f-4e82-854e-2bb797c017d8/overview

根本无法让嵌套路由工作


我对你的问题很感兴趣，因为我知道这个问题在我未来的项目中会发生在我身上。我不得不承认深层嵌套的路由非常难以理解。我希望我下面的解释是可以理解的。

- pages
  - index.vue // This is the home page
  - websites.vue - // NuxtPage
  - website // FOLDER
    - index.vue // Websites page content
    - [id].vue // NuxtPage - for Dynamic content based on the ID 
    - [id] // FOLDER
      - index.vue // Dynamic ID content
      - apps.vue // Nuxtpage
      - apps // FOLDER
        - index.vue // Apps page content
        - [id].vue // NuxtPage - for Dynamic content based on the ID
        - [id] // FOLDER
          - index // Dynamic ID content
          - overview.vue // NuxtPage
          - overview // FOLDER
            - index // Overview page content

我根据你的问题创建了 stackblitz 示例：

https://stackblitz.com/edit/nuxt-starter-ua5w8s?file=pages/websites/[id]/apps/[id]/overview/index.vue https://stackblitz.com/edit/nuxt-starter-ua5w8s?file=pages/websites/%5Bid%5D/apps/%5Bid%5D/overview/index.vue

解释基本嵌套路由的有用文章：

https://masteringnuxt.com/blog/explaining-nested-routes https://masteringnuxt.com/blog/explaining-nested-routes

https://blog.logrocket.com/troubleshooting-nested-pages-nuxt https://blog.logrocket.com/troubleshooting-nested-pages-nuxt

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

nuxtjs

nuxtjs3

nuxtjs2

NuxtJS 带参数的嵌套路由 的相关文章

  • Nuxt.js - 在页面中添加两个布局

    我是初学者Nuxt js我正在将 Vue 项目转换为 Nuxt js 并且我想在一个页面上使用两种布局 默认的一个和另一个 逻辑是这样的 第一个布局是 默认 或所有页面上的标题 第二个布局是设置栏 In settings我的页面有 3 条路

  • Nuxt不会自动从嵌套目录导入组件

    在我的 nuxt 应用程序中 嵌套目录中的组件不会按预期自动导入 对于我的一些组件 我有如下内容 vue 2 6 12 nuxt 2 15 0 components 目录结构 TopArea SomeComponent vue

  • 如何将 Three.js 导入我的 Nuxt 项目

    我想将 THREE js 中的示例文件夹中的模块 例如 OBJLoader 导入到我的 Nuxt 项目中 我可以导入三个主文件夹 但是在尝试导入示例文件夹中的模块时会发生错误 尝试了官方文档中的这些步骤 https trijs org do

  • Nuxt3 useAsyncData 无法在已安装的生命周期挂钩上工作

    我仍然对我在这里做错了什么感到有点困惑 本质上我有一个 vue 组件 我想在安装元素后异步加载一些数据 我正在使用 NUXT 3 和组合 API 看起来 onMounted 在渲染之前触发 并且没有正确接收数据 如果我将

  • 替换嵌套数组中的对象

    我有一个数组 其中存储了另一个代理数组 在此代理数组中 仅包含每个代理的 id 使用 ID 我获取每个代理所需的数据 并且我想用新的完整代理数据替换原始代理数组 或者至少将新数据推送给特定代理 这是我到目前为止所尝试过的 有简单的方法吗 如

  • 如何在 Nuxt3 中使用 @nuxtjs/axios 模块？

    我有这段代码可以从中获取API数据https fakestoreapi com products https fakestoreapi com products

  • Lighthouse：无法在本地主机上运行生成报告

    正如标题所示 我正在尝试为本地提供的 nuxt 应用程序生成报告 如果我通过 DevTools 生成报告 则需要非常长的时间 并且给我的评分非常差 与在部署的同一站点上生成报告相比 如果我尝试使用灯塔扩展 生成报告 按钮将被禁用 我是否会犯

  • 由于使用 Bulma 和 Buefy (nuxt-buefy) 时 PostCSS 出现问题，无法构建 Nuxt

    使用以下配置 一切正常npm run dev 但是当我们这样做时npm run build 有一个错误 assets scss main scss 中的错误 node modules nuxt postcss8 node modules c

  • 我需要从带有数据页的页面在组件中运行函数

    我有一个用于绘制图形或树的组件 并且我在页面中使用此组件 我的 axios 在页面上并提供数据 我需要将数据传递给组件的函数 然后从页面数据中绘制我的树 My Page

  • #NUXT.JS 中常用组件方法的存储位置

    实际上我想知道 NUXT JS 中常见组件方法的存储位置 我尝试过的事情 gt 在中间件中存储公共代码 它没用 因为据我所知 中间件只能处理对服务器的请求和响应 methods states methods SwitchManager fu

  • Apollo 客户端“未找到命名导出‘删除’”

    我正在尝试创建一个apollo client插件Nuxt 3应用 它当前抛出有关名为的包的错误ts invariant file Users my name Repositories project node modules apollo

  • 如何将 vue3-openlayers 插件添加到 nuxt

    我有以下 main ts 文件Vue3 https v3 vuejs org import createApp from vue import App from App vue How to do this in nuxt3 import

  • Vuetify 断点在 Nuxt.js 中不起作用

    我正在使用一个项目Nuxt js作为 SSR 发动机和Vuetify作为样式框架 在我的模板之一中 我有这样的代码

  • Nuxt 3动态组件中根据路由参数进行API调用

    我正在尝试创建一个简单的 Nuxt 3 应用程序用于学习目的 它使用动态路线 https v3 nuxtjs org docs directory structure pages dynamic routes加载页面时从 API 加载数据

  • 无法将中间件与 Firebase 和 NuxtJS 3 一起使用

    我正在尝试在示例项目中使用 Firebase 身份验证 身份验证按预期工作 但是一旦我想使用中间件来阻止用户访问管理页面或在已经登录的情况下访问登录页面 这是不可能的 我已经尝试了几个小时 但没有任何效果 这是我的package json

  • nuxt v2 和 firebase 函数的部署错误

    当我尝试在 firebase 函数中渲染 nuxt 时 出现 用户代码加载失败 无法确定后端规范 错误 其他功能都可以部署 但是无论模式是SSR还是SPA 只有nuxt功能失败 我查看了日志 没有发现任何有用的信息 当我查看 无法确定后端规

  • 如何在没有 API 请求的情况下使用 Nuxt.js 生成 100% 静态网站？

    我正在测试周围Nuxt js https nuxtjs org 生成静态网站 使用API 获取数据时是否可以生成100 静态站点 从而摆脱API和请求 根据我到目前为止的测试 所有文件都已正确生成并托管在Github 页面 https pa

  • Nuxt JS 插件是否可以只运行一次？

    我有几个 VueX 操作 仅在服务器上运行 并从nuxtServerInit 它们向外部服务发出 HTTP 请求 这会减慢 TTFB 的速度 我想实现一个缓存插件 可以从 Redis 存储和检索值 目的是避免在每个请求的操作中发出 HTTP

  • Laravel Sanctum + Nuxt JS 我无法通过 CORS

    在开始之前 我想说我搜索并尝试了很多方法 但似乎没有一个能正常工作 我还创建了一个新的 Laravel 安装 但仍然没有成功 问题是 CORS 我总是被 CORS 阻止 该设置使用Laravel Valet Laravel 应用程序运行于h

  • Nuxt.js 使用 https 调用服务器端 API 的问题

    当我使用 HTTP 时 我遇到 nuxt 服务器端 API 调用问题S 在客户端 一切都很好 当我通过链接在客户端切换页面时 API 可以工作 但是当我按下 Ctrl f5 并且数据将在服务器端预取时 实际上没有 API 调用 也没有提供数

随机推荐

热门标签