Framework7：履歴を保存しているときに異なるパラメータを持つ経路に移動する

Question

Framework7とVueを使用していて、ルータが別のパラメータを持つページを読み込まない。

main.js：

new Vue({ 
    framework7: { 
     root: '#app', 
     routes: Routes, 
     pushState: true, 
     cache: false, 
    }, 
    // ... 

routes.js

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

左panel.vue：

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

ルータは初回のみのページをロードしますが、別のパラメータでURLをロードしようとすると、再びロードされません。

router.reloadPage(url)が動作しますが、非常に必要なナビゲーション履歴は保持されません。各ページには長時間のajax呼び出しが含まれているため、フレームワーク7の履歴を活用することが重要です。自分のバックスタックを作成すると、これらのajax呼び出しが再び起動されます。

どうすればこの問題を解決できますか？

pageElement：router.loadオプションに探し

Answer 1

は、私は、次の項目を見つけ、それがすでに手動または異なる手段/ライブラリによってページのコンテナに追加された場合は、ページののHTMLElementをロードすること。

つまり、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); 
    }, 
} 

ギャラリーだから私は、次のソリューションに付属しています.vueテンプレート

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

gallery.vueスクリプト

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