Framework7: переход к маршруту с разными параметрами с сохранением истории

я использую Framework7 и Vue, и маршрутизатор не загружает страницу с другим параметром.

основной.js:

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

маршруты.js

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

левая панель.vue:

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

Маршрутизатор загружает страницу только в первый раз, но не загружает ее снова, когда я пытаюсь загрузить URL-адрес с другими параметрами.

router.reloadPage(url) работает, но не сохраняет историю переходов, которая очень нужна. Важно использовать историю Framework7, потому что каждая страница содержит длинные вызовы ajax, и если я создам свой собственный задний стек, это приведет к тому, что эти вызовы ajax будут снова запущены сзади.

Как я могу это решить?


javascript vuejs2 html-framework-7
person Alexandre Giuseppe    schedule 25.08.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Просматривая router.load варианты, я нашел следующий пункт:

pageElement: HTML-элемент страницы для загрузки, если она уже добавлена ​​в контейнер Pages вручную или другими средствами/библиотекой.

Это означает, что мне нужно добавить страницу с помощью VueJS, а затем перейти к ней с помощью Framework7. Итак, я пришел к следующему решению:

левая панель.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 });
},
// ...
person Alexandre Giuseppe    schedule 26.08.2017