blocks|key|1041873|text|IMO它目前是离子领域的一个bug+(见https://github.com/ionic-team/ionic/issues/19707)。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1041874|为了暂时解决这个问题，您可能可以使用|1041875|navCtrl.push('/login');
history.replaceState(undefined,+'',+`?redirect=${window.location.pathname}`);|code-block|syntax|javascript|1041876|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/ionic-team/ionic/issues/19707^0|K|1C|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

IMO it's currently a bug in Ionic (see <a href="https://github.com/ionic-team/ionic/issues/19707" rel="nofollow noreferrer">https://github.com/ionic-team/ionic/issues/19707</a>).

To work around it for the moment, you could probably use

<pre class="lang-js prettyprint-override"><code>navCtrl.push('/login');
history.replaceState(undefined, '', `?redirect=${window.location.pathname}`);
</code></pre>

blocks|key|1041882|text|感谢您在正确方向上的推动！您提供的代码没有更改url，因为navCtr.push返回一个promise。您必须等待它完成，然后才能更改状态。我最终得到了这个变通方法：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1041883|const+navCtrl:+HTMLIonRouterElement+=+document.querySelector("ion-router");
fetch('https://someapi.com/users/1').then(
++res+=>+navCtrl.push('/main'),
++err+=>+{
+++++navCtrl
++++++++.push(`/login`)
++++++++.then(()+=>+history.replaceState(undefined,+'',+`?redirect=${encodeURIComponent(window.location.pathname)}`))
++}
);|code-block|syntax|javascript|1041884|奇怪的是，像离子和模板这样被广泛使用的框架并不支持常见的查询字符串。我希望他们能尽快解决这个问题。|1041885|entityMap^0|T|B|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

Thanks for the nudge in the right direction! The code you provided did not change the url, because <code>navCtr.push</code> returns a promise. You have to wait for it to finish before you can change the state. I ended up with this working workaround:

<pre class="lang-js prettyprint-override"><code>const navCtrl: HTMLIonRouterElement = document.querySelector("ion-router");
fetch('https://someapi.com/users/1').then(
 res =&gt; navCtrl.push('/main'),
 err =&gt; {
 navCtrl
 .push(`/login`)
 .then(() =&gt; history.replaceState(undefined, '', `?redirect=${encodeURIComponent(window.location.pathname)}`))
 }
);
</code></pre>

It's strange that such widely used frameworks like Ionic and Stencil don't support common querystrings. I hope they will fix this issue soon.

blocks|key|1041890|text|我构建了一个本机函数来从querystring中获取每个参数，|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1041891|export+const+RouterGetUriParam+=+(name)+=>+{
++const+queryString+=+window.location.search;
++const+urlParams+=+new+URLSearchParams(queryString);
++if+(urlParams.has(name))+{
++++return+urlParams.get(name);
++}+else+{
++++return+null;
++}
};|code-block|syntax|javascript|1041892|你可以像这样在模具中使用它：|1041893|+@Prop()+withMore:+boolean+=+(RouterGetUriParam("withMore")+==+'true')|1041894|urlparam看起来像?withMore=true|offset|length|style|CODE|1041895|entityMap^0|0|0|0|0|C|E|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|W|8|@$M|X|N|Y|O|P]]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

i build a native function to get every parameter from the querystring,
<pre><code>export const RouterGetUriParam = (name) =&gt; {
 const queryString = window.location.search;
 const urlParams = new URLSearchParams(queryString);
 if (urlParams.has(name)) {
 return urlParams.get(name);
 } else {
 return null;
 }
};
</code></pre>
you can use it in stencil like this:
<pre><code> @Prop() withMore: boolean = (RouterGetUriParam(&quot;withMore&quot;) == 'true')
</code></pre>
the urlparam looks like <code>?withMore=true</code>

I have a StencilJS app with Ionic web components using the following routing setup:

<pre class="lang-html prettyprint-override"><code>&lt;ion-router useHash={false}&gt;
 &lt;ion-route url="/home" component="page-home"/&gt;
 &lt;ion-route url="/login" component="page-login"/&gt;
 &lt;ion-route url="/main" component="page-main"&gt;
&lt;/ion-router&gt;
</code></pre>

When I receive a 401 error from the api, I would like to redirect to the login page, with the current url as a redirect querystring parameter (in order to redirect the user back to where he came from), like so:

<pre class="lang-js prettyprint-override"><code>const navCtrl: HTMLIonRouterElement = document.querySelector("ion-router");
fetch('https://someapi.com/users/1').then(
 res =&gt; navCtrl.push('/main'),
 err =&gt; navCtrl.push(`/login?redirect=${window.location.pathname}`)
);
</code></pre>

When I do this an I receive an error from the api, and I want to navigate to the login page with the current route as querystring parameter, Stencil throws the following error: <code>[ion-router] the path does not match any route</code>.

How can I use the querystring with the ion-router?

Querystring support in ion-router (with StencilJs)

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我有一个带有Ionic web组件的StencilJS应用程序，使用以下路由设置：<ion-router useHash={false}> <ion-route url="/home" component="page-home"/> <ion-route url="/login" component="page-l...

问离子路由器中的Querystring支持(使用StencilJs)
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问离子路由器中的Querystring支持(使用StencilJs)EN