You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/docs/en/guides/view-transitions.mdx
+5-15Lines changed: 5 additions & 15 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -391,27 +391,17 @@ import { ClientRouter } from "astro:transitions";
391
391
</html>
392
392
```
393
393
394
-
The `navigate` method takes these arguments:
395
-
396
-
-`href` (required) - The new page to navigate to.
397
-
-`options` - An optional object with the following properties:
398
-
-`history`: `"push"` | `"replace"` | `"auto"`
399
-
-`"push"`: the router will use `history.pushState` to create a new entry in the browser history.
400
-
-`"replace"`: the router will use `history.replaceState` to update the URL without adding a new entry into navigation.
401
-
-`"auto"` (default): the router will attempt `history.pushState`, but if the URL is not one that can be transitioned to, the current URL will remain with no changes to the browser history.
402
-
-`formData`: A [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) object for `POST` requests.
403
-
404
394
For backward and forward navigation through the browser history, you can combine `navigate()` with the built-in `history.back()`, `history.forward()` and `history.go()` functions of the browser. If `navigate()` is called during the server-side render of your component, it has no effect.
405
395
396
+
<ReadMore>See the `astro:transitions` reference for more information about the [`navigate()` options](/en/reference/modules/astro-transitions/#navigate).</ReadMore>
397
+
406
398
### Replace entries in the browser history
407
399
408
400
Normally, each time you navigate, a new entry is written to the browser's history. This allows navigation between pages using the browser's `back` and `forward` buttons.
409
401
410
402
The `<ClientRouter />` router allows you to overwrite history entries by adding the `data-astro-history` attribute to any individual `<a>` tag.
411
403
412
-
The `data-astro-history` attribute can be set to the same three values as the [`history` option of the `navigate()` function](#trigger-navigation):
The `data-astro-history` attribute can be set to the same three values as the [`history` option of the `navigate()` function](/en/reference/modules/astro-transitions/#history-option):
415
405
416
406
-`"push"`: the router will use `history.pushState` to create a new entry in the browser history.
417
407
-`"replace"`: the router will use `history.replaceState` to update the URL without adding a new entry into navigation.
@@ -632,7 +622,7 @@ This event is used:
632
622
- To alter loading, such as loading content you've defined in a template rather than from the external URL.
633
623
- To change the `direction` of the navigation (which is usually either `forward` or `backward`) for custom animation.
634
624
635
-
Here is an example of using the `astro:before-preparation` event to load a spinner before the content is loaded and stop it immediately after loading. Note that using the `loader` callback in this way allows asynchronous execution of code.
625
+
Here is an example of using the `astro:before-preparation` event to load a spinner before the content is loaded and stop it immediately after loading. Note that using the [`loader` callback](/en/reference/modules/astro-transitions/#loader) in this way allows asynchronous execution of code.
636
626
637
627
```astro
638
628
<script is:inline>
@@ -704,7 +694,7 @@ At this point of the lifecycle, you could choose to define your own swap impleme
704
694
705
695
<p><Sincev="4.15.0" /></p>
706
696
707
-
The `swapFunctions` object of the `astro:transitions/client` module provides five utility functions that handle specific swap-related tasks, including handling document attributes, page elements, and script execution. These functions can be used directly to define a custom swap implementation.
697
+
The [`swapFunctions` object](/en/reference/modules/astro-transitions/#swapfunctions) of the `astro:transitions/client` module provides five utility functions that handle specific swap-related tasks, including handling document attributes, page elements, and script execution. These functions can be used directly to define a custom swap implementation.
708
698
709
699
The following example demonstrates how to use these functions to recreate Astro's built-in swap implementation:
0 commit comments