Giới thiệu về định tuyến trong Svelte
Svelte là một khung web phát triển nhanh mà bạn có thể sử dụng để xây dựng trang web. Nó thể hiện mình là một giải pháp thay thế nhẹ, dễ sử dụng cho các framework phổ biến như React và Vue.
Mọi khung JavaScript phổ biến đều có một thư viện đồng hành mà bạn có thể sử dụng để định tuyến. Khám phá cách Svelte cho phép bạn quản lý các URL của mình và mã xử lý chúng.
Mục Lục
Thư viện định tuyến phổ biến
Thư viện định tuyến phổ biến nhất cho React là React Router, được tạo bởi nhóm Remix. Đối với VueJS, có Vue Router cho phép nhà phát triển kiểm soát tốt mọi điều hướng. Trong thế giới Svelte, thư viện định tuyến phổ biến nhất là định tuyến mảnh dẻ.
Thư viện định tuyến chính khác cho Svelte là người điều hướng mảnh dẻ. Vì nó là một ngã ba của định tuyến mảnh dẻthật hữu ích khi tìm hiểu về thư viện đó trước.
Cách thức hoạt động của Thư viện định tuyến mảnh dẻ
Có ba thành phần quan trọng để xử lý các route trong Svelte: bộ định tuyến, liên kếtVà Tuyến đường. Để sử dụng chúng trong ứng dụng của bạn, bạn chỉ cần nhập các tiện ích này từ định tuyến mảnh dẻ thư viện.
<script>
import {Route, Router, Link} from "svelte-routing";
</script>
Thành phần Bộ định tuyến có thể có hai đạo cụ tùy chọn: đường cơ sở Và url. Các đường cơ sở tài sản tương tự như tên cơ sở prop trong Bộ định tuyến phản ứng.
Theo mặc định, nó được đặt thành “/”. đường cơ sở có thể hữu ích nếu ứng dụng của bạn có nhiều điểm vào. Ví dụ: hãy xem xét mã Svelte sau:
<script>
import { Route, Router, Link } from "svelte-routing";
let basepath = "/user";
let path = location.pathname;
</script><Router {basepath}>
<div on:click={() => (path = location.pathname)}>
<Link to="https://www.smartreviewaz.com/">Go to home</Link>
<Link to="/user/david">Login as David</Link>
</div>
<main>
You are here: <code>{path}</code>
<Route path="https://www.smartreviewaz.com/">
<h1>Welcome Home!</h1>
</Route>
<Route path="/david">
<h1>Hello David!</h1>
</Route>
</main>
</Router>
Nếu bạn chạy mã này, bạn sẽ nhận thấy rằng khi bạn nhấp vào Đi về nhà nút, trình duyệt sẽ điều hướng đến đường dẫn cơ sở “/user”. Tuyến xác định thành phần sẽ hiển thị nếu đường dẫn khớp với giá trị trong chỉ định Tuyến đường chống đỡ.
Bạn có thể xác định những phần tử nào sẽ hiển thị bên trong thành phần Tuyến đường hoặc dưới dạng riêng biệt .svelte miễn là bạn nhập tệp đó đúng cách. Ví dụ:
<Route path="/about" component={About}/>
Khối mã ở trên yêu cầu trình duyệt hiển thị Ứng dụng thành phần khi tên đường dẫn là “/about”.
Khi đang sử dụng định tuyến mảnh dẻxác định liên kết nội bộ với liên kết thành phần thay vì HTML truyền thống Một phần tử.
Điều này tương tự như cách React Router xử lý các liên kết nội bộ; mọi thành phần Liên kết nên có một ĐẾN prop cho trình duyệt biết đường dẫn để điều hướng đến.
Khi trình duyệt hiển thị một thành phần Svelte, Svelte sẽ tự động chuyển đổi tất cả các thành phần Liên kết thành tương đương Một các phần tử, thay thế các ĐẾN chống đỡ với một href thuộc tính. Điều này có nghĩa là khi bạn viết như sau:
<Link to="/some/path">This is a Link Component in svelte-routing</Link>
Svelte trình bày nó với trình duyệt dưới dạng:
<a href="/some/path">This is a Link Component in svelte-routing</a>
Bạn nên sử dụng thành phần Liên kết thay vì thành phần truyền thống Một yếu tố khi làm việc với svelte-routing. Điều này là do Một các phần tử thực hiện tải lại trang theo mặc định.
Tạo SPA với Svelte và Svelte-Routing
Đã đến lúc áp dụng mọi thứ bạn đã học vào thực tế bằng cách tạo một ứng dụng từ điển đơn giản cho phép người dùng tìm kiếm các từ. Dự án này sẽ sử dụng Dictionary API miễn phí.
Để bắt đầu, hãy đảm bảo rằng bạn đã cài đặt Sợi trên máy của mình và chạy:
yarn create vite
Điều này sẽ tạo ra một dự án mới bằng cách sử dụng công cụ xây dựng Vite. Đặt tên cho dự án của bạn, sau đó chọn “Svelte” làm khung và “JavaScript” làm biến thể. Sau đó, lần lượt chạy các lệnh sau:
cd <project_name>
yarn
yarn add svelte-routing
yarn dev
Tiếp theo, xóa nội dung của Ứng dụng.svelte file và thay đổi cấu trúc dự án thành như thế này:
Từ hình minh họa ở trên, bạn có thể thấy rằng có một thư mục “thành phần” với hai tệp: Trang chủ.svelte Và Ý nghĩa.svelte. Ý nghĩa.svelte là thành phần sẽ hiển thị khi người dùng tìm kiếm một từ.
Điều hướng đến Ứng dụng.svelte tệp và nhập các thành phần Tuyến đường, Bộ định tuyến và Liên kết từ thư viện định tuyến svelte. Đồng thời đảm bảo nhập Trang chủ.svelte Và Ứng dụng.svelte các thành phần.
<script>
import { Route, Router, Link } from "svelte-routing";
import Home from "./components/Home.svelte";
import Meaning from "./components/Meaning.svelte";
</script>
Tiếp theo, tạo một thành phần Bộ định tuyến bao bọc một chủ yếu phần tử HTML với lớp “ứng dụng”.
<Router>
<main class="app">
</main>
</Router>
bên trong chủ yếu phần tử, thêm một điều hướng phần tử có thành phần Liên kết là phần tử con của nó. Chỗ dựa “đến” của thành phần Liên kết này phải trỏ đến “/”. Thành phần này sẽ cho phép người dùng điều hướng đến trang chủ.
<main class="app">
<nav>
<Link to="https://www.smartreviewaz.com/">Home</Link>
</nav>
</main>
Bây giờ là lúc để làm việc trên các tuyến đường. Khi người dùng tải ứng dụng, Trang chủ thành phần sẽ kết xuất.
Điều hướng đến “/find/:word” sẽ hiển thị Nghĩa thành phần. Mệnh đề “:word” là một tham số đường dẫn.
Đối với dự án này, bạn không cần phải lo lắng về CSS. Đơn giản chỉ cần thay thế nội dung của riêng bạn app.css tập tin với nội dung của app.css tệp từ kho lưu trữ GitHub này.
Bây giờ là lúc để xác định các tuyến đường. Đường dẫn cấp gốc sẽ hiển thị Trang chủ thành phần, trong khi “/find/:word” sẽ hiển thị Nghĩa thành phần.
<Route path="https://www.smartreviewaz.com/" component={Home} /> <Route path="/find/:word" let:params>
<Meaning word={params.word} />
</Route>
Khối mã này sử dụng cho phép chỉ thị để chuyển tham số “word” xuống Nghĩa thành phần như một chỗ dựa.
Bây giờ, hãy mở Trang chủ.svelte tập tin và nhập khẩu điều hướng tiện ích từ thư viện “svelte-routing” và xác định một biến đã nhậpWord.
<script>
import { navigate } from "svelte-routing";
let enteredWord;
</script>
Bên dưới kịch bản thẻ, tạo một phần tử chính với lớp “trang chủ”, sau đó tạo một div phần tử với lớp “dictionary-text”.
<main class="homepage">
<div class="dictionary-text">Dictionary</div>
</main>
Tiếp theo, tạo một biểu mẫu với một trên: gửi chỉ thị. Biểu mẫu này nên chứa hai phần tử con: một đầu vào phần tử có giá trị được liên kết với đã nhậpWord biến và nút gửi được hiển thị có điều kiện ngay khi người dùng bắt đầu nhập:
<form on:submit|preventDefault={() => navigate(`/find/${enteredWord.toLowerCase()}`)}>
<input
type="text"
bind:value={enteredWord}
placeholder="Begin your search..."
autofocus
/>
{#if enteredWord}
<button type="submit">Search Word</button>
{/if}
</form>
Khối mã này sử dụng điều hướng chức năng chuyển hướng người dùng sau khi hành động gửi kết thúc. Bây giờ, hãy mở Ý nghĩa.svelte tệp và, trong thẻ tập lệnh, hãy xuất tệp từ chống đỡ và tạo một thông báo lỗi Biến đổi:
export let word;
let errorMessage = "No connection. Check your internet";
Tiếp theo, tạo một yêu cầu GET tới Dictionary API thông qua từ như tham số:
async function getWordMeaning(word) {
const response = await fetch(
`https://api.dictionaryapi.dev/api/v2/entries/en/${word}`
); const json = await response.json();
console.log(json);
if (response.ok) {
return json;
} else {
errorMessage = json.message;
throw new Error(json);
}
}
let promise = getWordMeaning(word);
Trong khối mã ở trên, hàm không đồng bộ trả về dữ liệu JSON nếu phản hồi thành công. Biến lời hứa đại diện cho kết quả của getWordMeaning chức năng khi được gọi.
Trong đánh dấu, xác định một div với lớp trang nghĩa. Tiếp theo, xác định một phần tử h1 chứa từ biến trong chữ thường:
<div class="meaning-page">
<h1>
{word.toLowerCase()}
</h1>
</div>
Tiếp theo, sử dụng các khối đang chờ của Svelte để gọi getWordMeaning chức năng:
{#await promise}
<p>Loading...</p>
{:then entries}{:catch}
{errorMessage}
{/await}
Mã này hiển thị các Đang tải… văn bản khi yêu cầu GET được gửi tới API. Nếu có lỗi, nó sẽ hiển thị nội dung của thông báo lỗi.
bên trong {:thì mục} khối, thêm vào như sau:
{#each entries as entry}
{#each entry.meanings as meaning}
<div class="entry">
<div class="part-of-speech">
{meaning.partOfSpeech}
</div> <ol>
{#each meaning.definitions as definition}
<li>
{definition.definition}
<br />
<div class="example">
{#if definition.example}
{definition.example}
{/if}
</div>
</li>
{/each}
</ol>
</div>
{/each}
{/each}
Nếu lời hứa giải quyết thành công, mục biến chứa dữ liệu kết quả.
Sau đó, cho mỗi lần lặp lại của lối vào Và nghĩamã này hiển thị một phần của bài phát biểu bằng cách sử dụng ý nghĩa.partOfSpeech và một danh sách các định nghĩa sử dụng định nghĩa.definition. Nó cũng sẽ hiển thị một câu ví dụ, nếu có sẵn.
Đó là nó. Bạn đã tạo một Ứng dụng Trang Đơn (SPA) từ điển bằng cách sử dụng định tuyến mảnh dẻ. Bạn có thể tiếp tục mọi thứ nếu bạn muốn, hoặc bạn có thể kiểm tra người điều hướng mảnh dẻmột nhánh của định tuyến mảnh dẻ.
Cải thiện trải nghiệm người dùng với định tuyến phía máy khách
Có nhiều lợi ích khi xử lý định tuyến trong trình duyệt thay vì máy chủ. Các ứng dụng sử dụng định tuyến phía máy khách có thể mang lại cảm giác mượt mà hơn cho người dùng cuối, đặc biệt là khi kết hợp với hoạt ảnh và chuyển tiếp.
Tuy nhiên, nếu bạn muốn trang web của mình xếp hạng cao hơn trong các công cụ tìm kiếm, bạn nên xem xét việc xử lý các tuyến trên máy chủ.