Question

我使用Framework7和Vue，路由器没有加载具有不同参数的页面。

main.js：

// ...
{
    path: '/gallery/:id',
    component: Gallery
},
// ...

routes.js

// ... 
galleryItemClicked(id) {
    let link = `/gallery/${id}`;
    this.$f7.mainView.router.load({ url: link });
}
// ...

左panel.vue：

router.reloadPage(url)

路由器仅首次加载页面，但在尝试加载具有不同参数的网址时，不会再次加载页面。

CamelSpringBootRunner.class可以正常工作，但它并不能保留非常需要的导航历史记录。使用Framework7历史记录非常重要，因为每个页面都包含冗长的ajax调用，如果我创建自己的后台堆栈，它将导致这些ajax调用再次被触发。

我该如何解决这个问题？

Answer 1

查看router.load选项后，我找到了以下项目：

pageElement：要加载的页面的HTMLElement，如果它已经手动或通过不同的方式/库添加到Pages容器中。

这意味着我需要使用VueJS添加页面，然后使用Framework7导航到它。所以我提出了以下解决方案：

左panel.vue：

// ... 
galleryItemClicked(id) {
    this.$emit('navigate', id);
}
// ...

main.vue模板：

<!-- ... -->
<left-panel @navigate="addGalery"></left-panel>
<!-- ... -->
<f7-views>
    <f7-view id="main-view" navbar-through :dynamic-navbar="true" main>
        <f7-pages>
            <gallery v-for="galleryId in galleries 
                     :id="galleryId" 
                     :key="id"></gallery>
<!-- ... -->

main.vue脚本：

// ...
data() {
    return {
        // ...
        galleries: []
    };
},
methods: {
    // ...
    addGalery(id) {
        this.galleries.push(id);
    },
}

gallery.vue模板

<template>
<f7-page ref="galleryElement">
    <!-- ... -->
</f7-page>
</template>

gallery.vue脚本

// ...
mounted() {
    this.$f7.mainView.router.load({ pageElement: this.$refs.galleryElement.$el });
},
// ...

Framework7：在保留历史记录的同时导航到具有不同参数的路径

1 个答案: