How to open many independent pages with the same name

1

How to open many independent pages with the same name. For example: I am on the “Catalog” page and I need to open another “Catalog” page, which will be completely new, not related to the previous “Catalog” page, etc. I use stackPages: true - it does not completely solve the problem, for example, the page opening animation is not correct. Thanks

2

Example: <a href="/cat?id=123">open cat</a>
In routes:

{
 path: '/cat',
 componentUrl : '/pages/cat.f7.html'
}

in router component:
var id = this.$route.query.id;

3

Thanks for the answer. I forgot to add that I am using Vue. But this does not change the essence. Yes, I add a unique value to the parameter when I open it and a new copy is created. But the props in the new copy change the props in the previous copy of the page and the animation is not correct when opening a new copy. Therefore, not a full copy is created.

4

Would be good to see live example or JSFiddle of what you trying to do

5

Everything is simple:

  1. I open the page: $f7.views.main.router.navigate(’/product-list/?for-unique-page=’+ $f7.view.main.history.length, {props: {param_item: item, param_index: index}}

  2. Being on this page I want to open the same page with new props, but leaving the current without any changes in history. Etc, at least 10 pages of “product-list” but independent of each other.

P.S. parameter “for-unique-page” - to create a new page

6

Why you describes us the working and default behavior. What happens for you, how the initial page changes?

7

The props “param_index_item” change and a new page does not open with standard animation (not right to left, but left to right)

8

Would be good to see live example or JSFiddle of what you trying to do

9

Yes i will do in JSFiddle

10

I started to make an example in JSFiddle and saw my error. Framework7 is working correctly, thanks for the help. A few tips who will have a similar task:

  1. stackPages: true
  2. Each page should have a unique parameter, for example: /product-list/?page_id=7
  3. We must not forget, if we work with DOM elements, then also assign unique classes or id to the element or take into account the path of the new page.
1 Like