Vue routable Tab, in tab component back button return to tab1

Questions
1

I have 2 behaviors :

  • Each time I return back to the first tab all the view is reloaded (which send all the api requests)

  • When I return back from a sub-route I am pushed to the first tab. For example:
    I have the tabs : tab1 , tab2 and tab3. In tab 3 I have 3 sub-route : profil, applications…
    When I click on profil, the component open, and then click on the back button, I am redirected to the tab1 (and all the page are reloaded with api requests).

here is my code :
My routes

   export default [
      {
        path: '/accueil/',
        component: HomePage,
        name:'Accueil',
        tabs: [
          {
            path: '/',
            id: 'tab1',
            component: Accueil
          },
          {
            path: '/tab2/',
            id: 'tab2',
            component: MessagesList
          },
          {
            path: '/tab3/',
            id: 'tab3',
            component: Compte
          }
        ]
      },
        {
        path: '/profil/',
        component: Profil,
        id: 'tab3',
        name:'profil',
        options: {
        transition: 'f7-cover',
        }
        },
        {
        path: '/apply/',
        component: Profil,
        id: 'tab3',
        name:'application',
        },
        {
        path: '/home/',
        component: FirstView,
        name:'splash',
      }
    ]

My init page (View):

`<f7-app :params="f7params">
    <f7-panel left cover>
      <f7-view url="/panel-left/" links-view=".view-main" />
    </f7-panel>
    <f7-view url="/home/" :main="true" :reload-pages="false" class="safe-areas" 
    :master-detail-breakpoint="800">
      
    </f7-view>
  </f7-app>
 `

In my tab3 component I click on this link:

<a href="/profil/" class="item-link item-content">

May be I am doing something wrong.

Thank you in advance for your help.

@nolimits4web