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

【问题标题】：How to create a page from the id parameter in the url如何从 url 中的 id 参数创建页面
【发布时间】：2021-12-31 22:25:03
【问题描述】：

我正在尝试从作为参数传递的 id 创建单个页面。

我的路线结构：

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

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

身份证号：

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] slug 成为 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>

新年快乐！！

【问题讨论】：

标签： firebase svelte sveltekit

【解决方案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]，这样可以提高代码的可读性/对意图的理解。

【讨论】：