reload docs

Author: Rich Harris

content/tutorial/04-advanced-sveltekit/03-link-options/02-reload/README.md

@@ -0,0 +1,17 @@
+---
+title: Reloading the page
+---
+
+Ordinarily, SvelteKit will navigate between pages without refreshing the page. In this exercise, if we navigate between `/` and `/about`, the timer keeps on ticking.
+
+In rare cases, you might want to disable this behaviour. You can do so by adding the `data-sveltekit-reload` attribute on an individual link, or any element that contains links:
+
+```svelte
+/// file: src/routes/+layout.svelte
+<nav +++data-sveltekit-reload+++>
+	<a href="/">home</a>
+	<a href="/about">about</a>
+</nav>
+```
+
+For more information on available link options and their values, consult the [link options documentation](https://kit.svelte.dev/docs/link-options).

content/tutorial/04-advanced-sveltekit/03-link-options/02-reload/app-a/src/routes/+layout.svelte

@@ -0,0 +1,24 @@
+<script>
+	import { onMount } from 'svelte';
+
+	let seconds = 0;
+
+	onMount(() => {
+		const interval = setInterval(() => {
+			seconds += 1;
+		}, 1000);
+
+		return () => {
+			clearInterval(interval);
+		};
+	});
+</script>
+
+<nav>
+	<a href="/">home</a>
+	<a href="/about">about</a>
+</nav>
+
+<slot />
+
+<p>the page has been open for {seconds} seconds</p>

content/tutorial/04-advanced-sveltekit/03-link-options/02-reload/app-a/src/routes/+page.svelte

@@ -0,0 +1,2 @@
+<h1>home</h1>
+<p>this is the home page.</p>

content/tutorial/04-advanced-sveltekit/03-link-options/02-reload/app-a/src/routes/about/+page.svelte

@@ -0,0 +1,2 @@
+<h1>about</h1>
+<p>this is the about page.</p>

content/tutorial/04-advanced-sveltekit/03-link-options/02-reload/app-b/src/routes/+layout.svelte

@@ -0,0 +1,24 @@
+<script>
+	import { onMount } from 'svelte';
+
+	let seconds = 0;
+
+	onMount(() => {
+		const interval = setInterval(() => {
+			seconds += 1;
+		}, 1000);
+
+		return () => {
+			clearInterval(interval);
+		};
+	});
+</script>
+
+<nav data-sveltekit-reload>
+	<a href="/">home</a>
+	<a href="/about">about</a>
+</nav>
+
+<slot />
+
+<p>the page has been open for {seconds} seconds</p>