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 }); 
} 
// ... 

路由器加載頁面僅在第一次，但當我嘗試加載具有不同參數的網址時，不會再次加載它。

router.reloadPage(url)做的工作，但它不保留非常需要的導航歷史。使用Framework7歷史記錄很重要，因爲每個頁面都包含冗長的ajax調用，並且如果我創建自己的後退堆棧，則會導致這些ajax調用再次被觸發。

我該如何解決這個問題？

Answer 1

展望router.load選項我發現下面的項：

pageElement：如果它已加入到手動的網頁的容器或通過不同的方式/庫頁面的HTML元素加載。

這意味着我需要使用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 }); 
}, 
// ...