svelte js navigation

app.svelte

<script>
	let name = 'world';
	
	
const states = {
	FIRST : "first",
	SECOND : "second",
	THIRD:"third"
}

	let state = states.FIRST;
	
	let val = 0;

	import First from './First.svelte';
	import Second from './Second.svelte';
	import Third from './Third.svelte';
	
	function goSecond(data) {
		val = data.detail.value;
		state=states.SECOND;
	}
	
	function goFirst(data) {
		val = data.detail.value;
		state=states.FIRST;
	}
	
	function gothird(data) {
		val = data.detail.value;
		state=states.THIRD;
	}
	
</script>

{#if (state==states.FIRST)}
<p>
	first
</p>
<First on:next={goSecond} v={val}/>
{:else if (state == states.SECOND) }
<p>
second
</p>
<Second on:back={goFirst} on:next={gothird} v={val}/>
{:else if (state == states.THIRD) }
<p>
third
</p>
<Third on:back={goSecond}  v={val}/>
{:else}
<h1 color="red">not found</h1>

{/if}

First.svelte

<script>
import { createEventDispatcher } from 'svelte';

	export let v = 0;
    const dispatch = createEventDispatcher();
	
	function nxt() {
		let rnd = Math.random();
		rnd = Math.ceil(rnd *100)
		dispatch('next',{value:rnd});
	}
</script>

<button on:click={nxt}>forward</button>

<h1>
	{v}
</h1>

main.js

import App from './App.svelte';

var app = new App({
	target: document.body
});

export default app;

Second.svelte

<script>
import { createEventDispatcher } from 'svelte';
export let v = 0;
    const dispatch = createEventDispatcher();
	
	function bck() {
		let rnd = Math.random();
		rnd = Math.ceil(rnd *100)
		dispatch('back',{value:rnd});
	}
	
	function forw() {
		let rnd = Math.random();
		rnd = Math.ceil(rnd *100)
		dispatch('next',{value:rnd});
	}
</script>

<button on:click={bck}>backward</button>

<button on:click={forw}>forward</button>

<h1>
	{v}
</h1>

Third.svelte

<script>
import { createEventDispatcher } from 'svelte';
export let v = 0;
    const dispatch = createEventDispatcher();
	
	function bck() {
		let rnd = Math.random();
		rnd = Math.ceil(rnd *100)
		dispatch('back',{value:rnd});
	}
</script>

<button on:click={bck}>backward</button>

<h1>
	{v}
</h1>

also on Svelte REPL : https://svelte.dev/repl/a69ac7502677400081122453aa45dfbb?version=3.7.1