svelte + Framework7 使用ListItem跳转且传参的方法

路由配置

// 公告列表
import notice from "./view/notice/index.svelte";
// 公告阅读
import read from "./view/notice/read.svelte";

export default [
    {
        name: 'notice',
        path: '/notice',
        component: notice,
        master: true,
        detailRoutes: [{
            name: 'read',
            path: '/read/:id',
            component: read
        }]
    },
]

路由配置的重点：

 master 和 detailRoutes 必须要的

---

列表页面

<script>
    import { Page, List, Navbar, ListItem } from "framework7-svelte";
    let data = [];
    export let f7router;
    async function getlist() {
        await re.send("home/getgg.html").then((e) => {
            data = e.data;
        });
    }
</script>

<Page>
    <Navbar title="平台公告" backLink="返回" backLinkUrl="/home" />
    <List>
        {#each data as v}
            <ListItem
                title={v.title}
                link="/read/{v.id}"
                reloadDetail={true}
                routeProps={{ data: v }}
            />
        {:else}
            <ListItem title="未获取到数据" />
        {/each}
    </List>
</Page>

使用ListItem组件必备的reloadDetail={true} 传参的方法routeProps={{ data: v }}

详情页面

<script>
    import { Page, Navbar, app } from "framework7-svelte";
    export let data;
    export let id;
</script>

<Page>
    <Navbar title="公告详情" backLink="返回" />
    <div class="detail">
        <div class="title">{data.title}</div>
        <div class="time">{data.time}</div>
        <div class="content">{@html data.content}</div>
    </div>
</Page>

这个基本就OK了， 

演示效果

 官方的这个阅读页面，返回按钮是怎么去掉是我还在摸索，有知道的，告知一下

官方ListItem文档地址：跳转链接

使用的路由官方文档地址：跳转链接