Я работаю над проектом SvelteKit, в котором пытаюсь передать данные между двумя страницами с помощью функции перехода. К сожалению, я столкнулся с проблемами и не могу заставить его работать правильно.
Контекст Я хочу передать фиксированное значение («TOTO») с одной страницы на другую, чтобы убедиться, что передача данных работает правильно, прежде чем переходить к ее реализации с динамическими данными (например, идентификатором изображения).
Что я наделал Исходная страница (Gallery.svelte):
<script>
import { goto } from '$app/navigation';
const handleClick = () => {
console.info('Navigating to test value');
goto('/test/TOTO');
};
</script>
<div>
<button on:click = {handleClick}>Go to Test Value</button>
</div>
Страница назначения (src/routes/test/[value]/+page.svelte):
<script context = "module">
export async function load({ params }) {
const { value } = params;
return {
props: { value }
};
}
</script>
<script>
export let value;
console.info('Loaded value:', value);
</script>
<div class = "value-display">
<h1>Passed Value:</h1>
<p>{value}</p>
</div>
Возникла проблема Когда я нажимаю кнопку «Перейти к тестовому значению» в Gallery.svelte, меня перенаправляют на страницу /test/TOTO, но переданное значение (значение) не определено.
Что я проверил Структура файла: src/routes/test/[value]/+page.svelte размещен правильно. Консоль показывает значение «Загружено: неопределенное».
Дополнительная информация Версия SvelteKit: 2.0.0
Вопрос Может ли кто-нибудь помочь мне понять, почему значение, передаваемое через goto, не определено и как это исправить? Любая помощь будет принята с благодарностью!
Спасибо заранее за вашу помощь!
🤔 А знаете ли вы, что...
JavaScript используется для разработки современных одностраничных приложений (SPA), где весь контент загружается асинхронно.
Начиная с версии SvelteKit 1.0+, загрузка данных страницы больше не осуществляется через раздел <script context = "module">, а через сопутствующий раздел +page.js (или +page.ts, если вы используете Typescript), как описано в соответствующей документации.
Вы также можете указать, что этот механизм должен работать только на стороне сервера, вместо этого разместив функцию загрузки внутри +page.server.js (или, опять же, .ts).
В вашем конкретном случае:
// src/routes/test/[value]/+page.js
export const load = ({ params }) => {
const { value } = params;
return { // the 'props' property is no longer necessary
value
};
};
и
// src/routes/test/[value]/+page.svelte
<script>
export let data; // will contain the object returned by the load function
console.info('Loaded value:', data.value);
</script>
<div class = "value-display">
<h1>Passed Value:</h1>
<p>{data.value}</p>
</div>
Примечание: на странице галереи вам действительно следует использовать динамически генерируемые ссылки (например, с помощью экстраполяции строк) для навигации, а не через обработчик кнопок, который впоследствии вызывает действие goto, например:
<script>
const id = 'TOTO';
</script>
<div>
<a href = {`/test/${id}`}>Go to Test Value</a>
</div>