pushstate 相关问题

HTML5历史记录API允许网页操纵历史堆栈的内容，以便动态更新URL并响应后退按钮。

单击项目时浅路由效果很好 <question vote="-1"><p><a href="https://i.sstatic.net/IxUgPj7W.png" rel="nofollow noreferrer"><img src="https://cdn.txt58.com/i/AWkuc3N0YXRpYy5uZXQvSXhVZ1BqN1cucG5n" alt="Shallow Routing works well when clicking on an item"/> 直接键入项目URL时，浅路由将抛出404 link link to Stackblitz显示了问题</a></p> <p><a href="https://i.sstatic.net/mnjCNRDs.png" rel="nofollow noreferrer"><img src="https://cdn.txt58.com/i/AWkuc3N0YXRpYy5uZXQvbW5qQ05SRHMucG5n" alt="Shallow routing throws 404 when typing item url directly in browser"/><code>src/routes/(news)/+layout.svelte</code></a></p><h3> <a href="https://stackblitz.com/edit/sveltejs-kit-template-default-jhgre8ys?file=src%2Froutes%2F(news)%2F%2Bpage.svelte" rel="nofollow noreferrer"><code><script lang="ts"> import './../../app.css' import { page } from '$app/stores'; import { pushState } from '$app/navigation'; import { MediaQuery } from 'svelte/reactivity'; const { children, data } = $props(); const large = new MediaQuery('min-width: 800px'); const hasNoDetailSelected = $derived.by(() => { return ( typeof $page.state.id === 'undefined' && typeof $page.state.title === 'undefined' ); }); function onClickItem() { pushState('/news/abcdabcd-abcd-abcd-abcd-abcdabcdabcd/title-1', {id: 'abcdabcd-abcd-abcd-abcd-abcdabcdabcd', title: 'title-1'}) } </script> <header class="header"> <h1> <a data-sveltekit-preload-data="off" href="/">TestNewsApp</a> </h1> </header> {#if large.current} <main style="flex-direction: row"> <div class="news-list-container"> <nav> <ul> <li onclick={onClickItem}>Item 1</li> </ul> </nav> </div> <div class="news-detail-container"> {@render children()} </div> </main> {:else if !large.current && hasNoDetailSelected} <main style="flex-direction: column"> <div class="news-list-container"> <nav> <ul> <li onclick={onClickItem}>Item 1</li> </ul> </nav> </div> </main> {:else} <main style="flex-direction: column"> <div class="news-detail-container"> {@render children()} </div> </main> {/if} <style> .news-detail-container { background-color: lightyellow; flex: 1; } .news-list-container { background-color: lightcyan; flex: 1; } main { display: flex; flex: 1; } </style> </code></a> </h3><p><strong><code>src/routes/(news)/+page.svelte</code><pre></pre></strong> </p><code><script lang='ts'> import {page} from '$app/stores'; </script> {#if $page.state.id && $page.state.title} <p>Detail Page</p> {:else} <p>Popular News</p> {/if} </code><pre> </pre>问题 <p> <strong>直接键入URL时，我该如何进行此项工作？ <pre> </pre> </strong> </p> <pre>我认为我已经修复了它，但我不确定这是否是正确的方法</pre> thythythysy您需要处理SSR案例的浅层和深度路由<h3> </h3>I创建了a/news/ [id管理 <ul> <li></li></ul><code>routes/(news)/news/[id]/[title]/+page.svelte</code></question><answer tick="false" vote="0"><ul> <li><code><script lang='ts'> import {page} from '$app/state' const {data, id, title} = $props() </script> <p>Detail Page What? {id || page.params.id} {title || page.params.title}</p> </code></li> <li> </li>现在您需要将此苗条文件重复使用作为处理浅路由的组件<li> </li> </ul><p><strong><code>routes/(news)/+page.svelte</code><pre></pre></strong> </p><code><script lang='ts'> import {page} from '$app/stores'; import DetailPage from './news/[id]/[title]/+page.svelte' </script> {#if $page.state.id && $page.state.title} <DetailPage id={$page.state.id} title={$page.state.title} /> {:else} <p>Popular News</p> {/if} </code><pre> </pre> notice如何使用细节页面组件<ul> <li>路由/（news）/+布局的条件也必须修改以处理SSR和参数 </li> </ul><code> const hasNoDetailSelected = $derived.by(() => { return ( typeof $pageFromStore.state.id === 'undefined' && typeof $pageFromStore.state.title === 'undefined' && typeof pageFromState.params.id === 'undefined' && typeof pageFromState.params.title === 'undefined' ); }); </code><p> <strong><pre>固定的存储库是stackblitz</pre></strong> </p> <pre>如果这不是做事的方法，请随时建议</pre> <ul> <li> </li><li>

svelte url-routing sveltekit pushstate

回答 0 投票 0

sveltekit浅层路由中的pushState根本没有设置page.state.cart

我有一个 sveltekit 应用程序。在一页中 -cart.svelte- 我按一个按钮转到页面，我在其中选择订单是取货还是送货 -ordertype.svelte- 但我丢失了购物车内容，因为它是 sv...

sveltekit pushstate

回答 1 投票 0

为什么在 Safari 16.* 和 Chrome 107.0.5304 中使用内置浏览器后退按钮时，history.pushState() 不受尊重？

我发现在这些版本的 Safari 和 Chrome 中，在没有用户输入的情况下将新的状态值推送到浏览器历史记录中会出现意外行为。它将正确更新状态。你会...

google-chrome safari browser-history back pushstate

回答 1 投票 0

popstate 什么时候触发？它依赖什么？

我发现当用户按下后退或前进按钮时会触发 popstate。但这是否意味着这是浏览器的默认行为。假设一个网站不使用SPA，点击一个链接loa...