如何从 url 中的 id 参数创建页面

Question

我正在尝试根据作为参数传递的 ID 创建单个页面。

我的路线结构：

当我将鼠标移到列表中的某个项目上时，我得到了 firebase 文档的 ID，因此我需要创建一个页面来根据文档的 ID 显示文档中的数据。

http://localhost:3000/category/rent/541KqSMHpU17QuYLihFs

id:

541KqSMHpU17QuYLihFs

我的 listItem 组件：

<script>
    export let listing
    export let id
    export let handleDelete
    import DeleteIcon from '../../static/assets/svg/deleteIcon.svg'
</script>

<li class="categoryListing">
    <a href={`/category/${listing.type}/${id}`} class="categoryListingLink">
        <img src={listing.imgUrls[0]} alt={listing.name} class="categoryListingImg" />
        <div class="categoryListingDetails">
            <p class="categoryListingLocation">
                {listing.location}
            </p>
            <p class="CategoryListingName">
                {listing.name}
            </p>
            <p class="categoryListingPrice">
                ${listing.offer
                    ? listing.discountedPrice.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.')
                    : listing.regularPrice.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.')}
                {listing.type === 'rent' ? '/ por mês' : ''}
            </p>
            <div class="categoryListingInfoDiv">
                <img src="/assets/svg/bedIcon.svg" alt="cama" />
                <p class="categoryListingInfoText">
                    {listing.bedrooms > 1 ? `${listing.bedrooms} camas` : `${listing.bedrooms} cama`}
                </p>
                <img src="/assets/svg/bathtubIcon.svg" alt="banheiro" />
                <p class="categoryListingInfoText">
                    {listing.bathrooms > 1
                        ? `${listing.bathrooms} banheiros`
                        : `${listing.bathrooms} banheiro`}
                </p>
            </div>
        </div>
    </a>
    {#if handleDelete}
        <DeleteIcon
            class="removeIcon"
            fill="rgb(231, 76, 60)"
            onClick={() => {
                handleDelete(listing.id, listing.name)
            }}
        />
    {/if}
</li>

这里重要的是：

<a href={`/category/${listing.type}/${id}`} class="categoryListingLink">

如何让我的 [listingId] 别名成为 ID 页面？

我的 [listingId].svelte 到目前为止：

<script>
    import { page } from '$app/stores'
    const listingId = $page.params.listingId
    import { db } from '../../../../firebase.config.js'

    // get the id parameter from the url

</script>

新年快乐！！

Answer 1

起初我有点难以理解你的问题。

就目前而言，您的 URI 的形状为 /category/id/[listingId]，因此 http://localhost:3000/category/rent/541KqSMHpU17QuYLihFs 将无法匹配。您需要的是 /category/[id]/[listingId] 形状的 URI。因此，您需要将 id 目录重命名为 [id] 以使其成为动态目录。

然后您将能够像 listingId:

一样检索 id

<script>
    import { page } from '$app/stores'
    const { id, listingId }  = $page.params
    import { db } from '../../../../firebase.config.js'

    // do stuff

</script>

以上面的URL为例，id的值是'rent'，listingId的值是'541KqSMHpU17QuYLihFs'.

希望这能回答您的问题（也祝您新年快乐！）

编辑： [id] 参数的更好、更明确的名称是 [listingCategory] 并且会提高 code/the 的可读性了解您的意图。

如何从 url 中的 id 参数创建页面

How to create a page from the id parameter in the url

firebase

svelte

sveltekit