问题标签 [dynamic-routing]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
846 浏览

reactjs - 如何根据单击的链接动态地将用户路由到页面

我有一个从 Github API 获取的用户列表。我有一个组件可以接受用户名作为道具并显示有关用户的详细信息。

我想添加当用户点击它时显示该人的个人资料的功能,将 url 动态更改为 /users/:username 并显示他的个人资料。

或者,如果有一种方法可以从 url 中获取用户名。

我只使用 react 构建了应用程序(没有后端)

分享User.js的代码

渲染方法如下

前两条路线显示用户列表。我想添加当有人单击从搜索返回的用户列表时能够重定向到该配置文件的功能。

0 投票
1 回答
157 浏览

angular - 无法在延迟加载的模块中动态导航 - Angular Dynamic Routing

我正在尝试在延迟加载的模块中动态路由。但它不起作用。

惰性模块路由.ts

组件.ts

我希望它导航到 NameComponent,但它没有。

提前致谢:)

0 投票
1 回答
1841 浏览

c# - Asp.Net Core OData 4.0 中 BaseUrl 中的动态路由

我目前正在为 C# Asp.Net Core 应用程序开发 OData Api。

为了符合我们 API 的规范,URL 需要遵循我们的多租户架构: https://website.com/api/tenants/{tenantId}/odata/

由于 OData 4.0 没有规范如何实现动态基本 url,我实现了以下解决方法:使用中间件将 HTTP 上下文中的动态tenantId 替换为静态字符串“tenantId”。现在我需要找到一种方法来修改/操作 OData 元数据,以在响应中逆转这种解决方法。

实现示例

启动.cs:

ODataHelper:

示例控制器:

问题:

  1. 有没有更好的方法来使用 Asp.Net Core 在 OData 中实现动态基础路由?
  2. 有什么方法可以操作请求或 OData 元数据。详细地,响应需要在“@OData.context”和(用于将来)OData 分页元数据中显示带有动态tenantId 的原始 url。

到目前为止的研究/谷歌搜索:

0 投票
3 回答
2516 浏览

vue.js - Vue.js中如何实现n级嵌套动态路由?

我想在 Vue.js 中实现 n 级动态嵌套路由,其中​​ n 对我来说是未知的。例如 -

其中 1,2,...n 是级别

如何使用 Vue-router 实现这一点?

0 投票
1 回答
732 浏览

angular - 以角度 2 从 DB 动态加载路由时出现问题

请帮助解决我遇到的问题。我正在通过 Web 服务从数据库加载路由,并且在使用这些路由的链接时一切都按预期工作。但是当我刷新页面或直接在地址栏中写入url时,路由不起作用,为什么?

在刷新浏览器时,我收到 URL not found 问题

请在这个问题上帮助我。

  1. 我试图在 index.html 中注释我们的基本 href='/' 以便它不会重定向到 root
  2. 我尝试使用 async/await 保持控制直到 api 响应,以便首先创建 routecollection,然后 controll 将向前导航

但无法解决此问题。

我在“app.component.ts”构造函数中添加了我的代码。我调用一个加载路由的函数

在刷新浏览器时,同一页面应该会成功加载。

0 投票
0 回答
1187 浏览

reactjs - 使用客户端路由构建 Next.js 多语言应用程序

我目前正在使用 Next.js 开发一个多语言应用程序,我打算将它托管在 S3 存储桶中。在这个站点中,我需要通过从一条路由到另一条路由的客户端路由来维护跨路由的应用程序状态。

由于我需要支持 40 多种语言和国际化,因此执行此操作的过程如下:

  • 在 next.config.js 中,使用 exportPathMap 生成 /[language] 路由,其中​​包含“查询”内的变量,该变量包含该语言的特定语言环境。

  • 在 _app 的 getInitialProps 中加载此语言环境,并通过提供者将其传递下来,以便使用上下文 API 在应用程序的任何部分中使用。

  • 为了支持客户端路由,我将下一个/链接组件包装在一个自定义链接中,该链接传递所有道具并将“as”道具设置为“/[语言]/[路由]”。

该解决方案目前有效,但理想情况下,我不需要使用“as”道具“模拟”路由。我发现 next 中的动态路由不允许客户端路由,以避免将页面刷新到与动态路径匹配的新 .html 文件。例如:使用以下目录结构:

在 index.tsx 中,单击从 next/link 重定向到的链接/en/dashboard将触发对服务器的请求并完全刷新页面。因此,失去了客户端状态。

有没有更好的解决方案?这似乎是一个很常见的问题,但我找不到使用 Next.js 的优雅解决方案。

0 投票
2 回答
1000 浏览

vuejs2 - 获取单击的项目的 id 并将其用于在 vuejs 中创建动态 url

我有一个 vue 引导表,在每一行中显示数组对象的几个属性(通过 axios 的 api 调用获得)。

每行都有一个按钮,可以将我重定向到详细信息页面,该页面包含该对象的更多属性以及地图。

我正在考虑创建一个函数来获取单击行中包含的对象的属性 id,但我不确定如何去做。我需要 id 才能在 api 调用的最后部分使用它。

商店的结构使我有一个用于用户的模块和另一个用于这些对象(活动)的模块。在这些模块中,我处理状态、动作和突变。一个单独的文件处理 getter。由于这些活动将被修改,我也需要保存它们的状态。

我还需要能够从其他组件轻松访问单个对象的所有属性(不仅是表格行中显示的属性)。

我变得非常困惑。

这里的代码:

包含所有活动的表格:

在脚本中:

显然不起作用,在控制台中:

在吸气剂文件中,我有:

所以在这里我需要有类似的东西:

来自activity.js,即:

如果这是正确的,那么剩下的就是获取单击的表行中包含的对象的 id 的函数。另外,如何在 api 调用 (axios) 中写入该活动 ID?我现在有:

但我不确定这是否正确。另外,如何访问其他属性(显示在 detailActivity 页面中)?这将由一些属性的列表(可能是堆叠表组件)和地图组件组成,因此我需要访问这两个组件中的属性。我希望我已经足够清楚了,谢谢。

0 投票
1 回答
47 浏览

javascript - 如何使用动态路由传递信息/反应

ButtonList返回一个过滤列表,每个Buttons链接到一个新页面。我想通过添加动态路由来做到这一点,但我不知道如何编写代码......我如何正确使用history.push?任何帮助将不胜感激。

0 投票
1 回答
1759 浏览

nuxt.js - Nuxt 为所有动态路由生成带有后备文件的静态站点

我已经在整个互联网上搜索了我的问题的答案。到目前为止没有运气。

我想要实现的目标:我有一个在通用模式下运行的 Nuxt 应用程序。它类似于一个小型社交网络,用户可以在其中创建自己的个人资料并分享他们的工作。

所以我正在使用从 url 获取参数并从我的数据库 (firebase) 获取适当数据的动态路由 (users/_id.vue)。到目前为止,一切都很好。

我想用静态主机(Netlify 或 Zeit Now)托管它,我知道动态路由可以通过生成配置呈现。但这不是我想要的。对于这个特定的路线,我可以使用一个空 shell,然后 Async Javascript 访问 API 并用数据填充 shell。搜索引擎优化在这里并不重要,因为无论如何配置文件都落后于身份验证。

我所需要的只是 Nuxt 生成一个“catch all”文件,然后呈现用户配置文件客户端(users/martha 或 users/johndoe)。Gridsome 通过从 _id.vue 文件中渲染 _id.html 来做到这一点。Nuxt 也有办法做同样的事情吗?

谢谢你在这里帮我。

0 投票
1 回答
257 浏览

javascript - Next.js : 服务器端渲染页面中请求高时无响应(动态路由)

我在 GitHub 中使用 Next.js 和自定义服务器(express js)作为 Next.js 示例。我有一个页面,例如“/post/[id]”,它使用 next.js 动态路由。

问题是,当对该页面的请求变高时,响应时间也会变长,有时根本没有响应。此时,内存使用率变高,但未超过最大允许内存。

我在这里错过了什么?有什么我应该配置的配置吗?

它是 Next.js 约束吗?

它是客户端请求的大型环境中的 Next.js 约束吗?

相关链接的:

Next.js 自定义服务器快递

Next.js 动态路由