[Solved] F7-v4 + Vue allowDuplicateUrls Help

Questions
1

hi,
I have an app f7-v4.2.2 + Vue
And my problem is, while i keep switching between two pages, router history keeps pushing my pages.

my app params:

return {
  f7params: {
    ...
    routes,
    touch: {
    fastClicks: true
    },
    view: {
      stackPages: false,
      allowDuplicateUrls: false
    },
    on: {
      init: () => {
        console.log('f7 app init')
      }
    }
    ...
  }
}

routes:

... lots of routes, all  async
{
  path: '/login/',
  async (routeTo, routeFrom, resolve, reject) {
    const vueComponent = () => import('./views/login/Login.vue')
    vueComponent().then((vc) => {
      resolve({ component: vc.default })
    })
  }
}
...

here is a small jsfiddle where you can see how router keeps adding the pages to history.
maybe i didnt understand correctly what allowDuplicateUrls does.
Anyway, i need to only have one page with same link at the time in my router history.

2

Если вы загружаете новую страницу, которая такая же как и текущая, то она не будет загружена по умолчанию, т.к. allowDuplicateUrls = false (по умолчанию). Это не “одна страница в истории”, т.к. может быть так page1 => page2 => … => page1 и эта страница будет загружена.

Вам нужно самостоятельно реализовать такую логику. Т.к. stackPages и keepAlive хоть и держат одну страницу с ее состоянием, но они работают с историей, но, возможно, это стоит проверить и я в этом моменте ошибаюсь.

3

Thanks for the reply @shastox.
I implemented my own way to prevent router to push history if page exist.
here is the fiddle

jsfiddle

Any suggestion/advice is appreciated. Although its seems odd doing it that way.

4

Мне кажется, ваше решение хорошее, но могут быть проблемы (нужно тестировать).

Предыдущая страница, если включен SwipeBack, всегда сохраняется в DOM. В вашем коде может получиться так, что эта страница не будет содержаться в history. Сломает ли это Framework7, я не знаю, скорее всего нет, но лучше проверить.

1 Like
5

thanks again fot the advice.
will implement this solution on my app and see how swipeback works.

6

@pvtallulah why do you need to prevent it? There are so many edge cases with this that will definitely produce issues. Even many native apps use such thing with “infinite” navigation and it is fine :slight_smile:

1 Like
7

Thanks for the reply.
It was something that a client ask. I also like the “infinite” navigation. But i will leave things “native”, i will not prevent the push history.

1 Like