Giả sử bạn đang xây dựng một ứng dụng Svelte bằng Sapper và bạn có một tuyến trang động, chẳng hạn/routes/[id].svelte
.
Bạn muốn lấy phần động của URL (id
trong trường hợp này), và bạn biết bạn có thể lấy nó trongpreload()
chức năng trong<script context="module">
một phần của thành phần:
<script context="module">
export async function preload({ params }) {
const { id } = params
}
</script>
Nhưng vấn đề là bạn cần sử dụng nó bên ngoàipreload()
, để thực hiện một cái gì đó khác.
Cách để làm như vậy là trả lại từpreload
và xác định nó như một chỗ dựa của thành phần, bằng cách sử dụngexport *
cú pháp.
Đây là một ví dụ:
<script context="module">
export async function preload({ params }) {
const { id } = params
return { id }
}
</script>
<script>
export let id
if (typeof window !== ‘undefined’) {
alert(id)
}
</script>
Tải xuống miễn phí của tôiSổ tay Svelte
Các hướng dẫn nhỏ gọn hơn:
- Bắt đầu với Svelte - một hướng dẫn ngắn
- Cách làm việc với các đạo cụ trong Svelte
- Cách nhập các thành phần trong Svelte
- Cách xuất các hàm và biến từ một thành phần Svelte
- Mẫu Svelte: logic có điều kiện
- Cách kết xuất một thành phần Svelte theo yêu cầu
- Slotte Slots
- Cách thêm nhận xét trong các mẫu Svelte
- Ràng buộc mảnh mai
- Xử lý cập nhật trạng thái trong Svelte
- Câu lệnh phản ứng trong Svelte
- Sự kiện vòng đời của Svelte
- Svelte mẫu: vòng lặp
- Giải quyết lời hứa trong các mẫu Svelte
- Làm việc với các sự kiện trong Svelte
- Quản lý nhà nước nhiều thành phần trong Svelte
- Cách truy cập tham số URL trong Sapper bên ngoài mô-đun tập lệnh
- Cách áp dụng động CSS trong Svelte
- Cách chuyển hướng đến một URL trong Sapper
- Cách mô phỏng vòng lặp for trong các mẫu Svelte