动态选路器
我正试图用Svelte和Strapi v4作为后端构建一个简单的博客。我有两页:列出所有的帖子页面(这里没有问题)和帖子页(在这里的问题)。对于帖子列表，我设法使用onMount从Strapi获取数据。效果很好。
<script>
import { onMount } from "svelte";
let posts = []
onMount(async() => {
const response = await fetch('http://localhost:1337/api/blogs')
posts = await response.json()
}) //etc...指向特定post页面的链接id.svelte工作：
<p class="link"><a href={`/blog/${post.id}`}>En savoir plus >>></a></p>但我得到了一个错误。我无法告诉Svelte :在id.svelte页面中获取这些特定的id数据。在id.svelte中使用下面的代码不起作用，我在控制台中得到一个404。
<script>
import { page } from '$app/stores';
console.log(page)我也尝试过这种方法，但没有成功：
<script context="module">
export async function load(context = useContext(contextValue)) {
console.log(context);我被堵住了，不知道该如何前进。在SvelteKit，Svelte.谢谢你的大力帮助。
下面是路由的文件树：
我还在我的App.svelte文件中使用svelte路由。我使用下面的代码试图告诉Svelte找到我的id页面。但我总是收到回复说在服务器上找不到页面..。
<!-- App.svelte -->
<script>
import { Router, Route } from "svelte-routing";
import Index from "./App.svelte";
import id from "./blog/[id].svelte";
export let url = "";
</script>
<Router url="{url}">
<Route path="blog/:id" let:params>
<posteid id="{params.id}" /></Route>
<Route path="/" component="{Index}" />
</Router>`回答 3
Stack Overflow用户
发布于 2022-01-24 09:47:59
在sveltekit中，您可以在特殊的id函数中获取路由param 加载，然后获取内容：
<script context="module">
export async function load({ params, fetch, stuff }) {
const blogId = params.id
const url = `/your-api/blogs/${blogId}`;
const res = await fetch(url)
if (res.ok) {
return {
props: {
content: await res.json()
}
}
}
return {
status: res.status,
error: new Error(
`Error by fetching blog with id: ${blogId}!`
)
}
}
</script>Stack Overflow用户
发布于 2022-02-09 21:18:12
谢谢你@johann筷子。现在，我可以在我的id.svelte中使用这个路由访问我的app.svelte页面：
<Route path="blog/:id" let:params/>指向特定id的链接工作正常。不知道在我的例子中"let:params“是否是正确的参数。
但是，无论是哪种方法试图获取特定id的特定数据，我仍然完全被阻塞了。
示例1:不工作=>
<script>
export const load = async context => {
console.log('context', context)}
</script>我在控制台里什么也没有，没有上下文。
示例2:不工作=>
<script context = "module">
export async function load({ fetch, page }) {
const id = page.params.id
const res = await fetch(`http://localhost:1337/api/blogs/${id}`)
const blogpost = await res.json()
if (res.ok) {
return {
props: {
blogpost
}
}
}
}示例3:不工作=>
<script>
import { onMount } from "svelte";
let blogpost = []
onMount(async () => {
const response = await fetch('http://localhost:1337/api/blogs/${id}')
blogpost = await response.json()
console.log(blogpost)
} )
</script>控制台上没有博客。我认为这是因为"id“没有定义，但是我不知道如何声明它，获取这个"id”并实际获取这个特定的数据。
看不到解决方案。我为我的无知感到抱歉。
Stack Overflow用户
发布于 2022-08-31 14:57:37
对我来说，这对我来说是可行的，可以把小路弄来。
<Route
path="property/:propertyId"
let:params={propertyId}
component={ViewProperty}
/>然后在组件中添加
export let property;注意，这里的propertyId本质上意味着您想要设置的参数
https://stackoverflow.com/questions/70826406
复制相似问题
腾讯云开发者
