Svelte - Routing

Pertama, kita perlu menginstal di terminal:

npm install --save svero

Berikut adalah halaman github untuk svero jika Anda ingin mempelajari lebih lanjut.

Setelah diinstal, kunjungi App.svelte dan perbarui agar sesuai dengan yang berikut ini:

<script>

	import { Router, Route } from 'svero';

	import Header from './Header.svelte';
	import Index from './pages/Index.svelte';
	import About from './pages/About.svelte';

</script> 

<style>
	
</style>

<Header/>

<div class="container">
	<Router>
		<Route path="*" component={Index} />
		<Route path="/about" component={About} />
	</Router>
</div>

Pertama, kita mengimpor router di bagian atas. Kemudian, kita mengimpor beberapa file yang belum ada (kita akan membuatnya dalam sd detik).

Kemudian, kita bersarang <Header / >element (Menerima nama itu berdasarkan nama file), dan di bawahnya, kita mendefinisikan rute kita. Dalam Angular, ini mirip dengan tag outlet router, kecuali kita juga menggunakannya untuk menentukan jalur dan komponen terkait kita.

Mari kita membuat file-file sekarang.

/pages/About.svelte:

<script>
  export let router = {};

  // Those contains useful information about current route status
  router.path; // /test
  router.route; // Route Object
  router.params; // /about/bill/123/kansas { who: 'bill', where: 'kansas' }
</script>

<h1>About me</h1>

<p>This is my router path: {router.path}</p>

Di bagian atas sini, kita menunjukkan bagaimana Anda dapat mengakses berbagai properti router dengan perpustakaan router yang kita gunakan.

/pages/Index.svelte:

<h1>I'm homeee</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis, laborum dignissimos? Ab blanditiis veniam a aspernatur autem, harum, quia dolor pariatur labore asperiores recusandae nihil dolorem exercitationem id itaque tempora?</p>

Dalam hal ini, kita hanya menentukan templat. Jika Anda tidak memerlukan logika atau gaya, hilangkan saja bagian komponen tersebut.

/scr/Header.svelte:

<script>

    import {Link} from "svero"

</script>

<header>
    <Link href="/home" className="logo">Hello!</Link>
    <nav>
        <ul>
            <li><Link href="/home">Home</Link></li>
            <li><Link href="/about">About</Link></li>
        </ul>
    </nav>
</header>

Alih-alih menggunakan <a>tag reguler, kita menggunakan Link dari svero. Juga, perhatikan className alih-alih kelas, saat kita menggunakan komponen Link.

Jika Anda menyimpan semuanya, itu harus siap untuk rock! Tapi itu agak jelek juga.