Page navigating to itself from itself

Questions
1

I have an issue where I have a map page that can either have a parameter code passed to it or not. If it does; it displays a certain location and if it doesn’t it displays a default location.

My problem is that if I navigate to the map with the parameter set and then go to the side panel and navigate to the map page again, it doesn’t recognise that it’s already on this page and it tries to navigate to itself from itself causing problems with the initialisation of the google map. I presume this is because the path is different due to not having the parameter code set.

Is there a way to prevent the link in the side panel from navigating to a page if you’re already on it? Have I maybe not set up my routes correctly?

Routes entry…

routes: [
  {
    path: '/map/code/:code?/',
    componentUrl: './pages/map.html',
    name: 'map',
  },
]

From a page where the code is set…

<a href="/map/code/{{branch.code}}/" class="item-link item-content"></a>

From side panel where code is not set …

<div class="panel panel-left panel-cover">
  <div class="page">
    <div class="page-content">
      <div class="list links-list">
        <ul>
          <li>
            <a href="/map/" class="panel-close" data-force="true" data-ignore-cache="true">
              My Location
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
2

You can change it to async route http://framework7.io/docs/routes.html#async-route

And compare routeTo and routeFrom parameters and if it is same route then call reject(), otherwise resolve it with your page component

1 Like
3

Thanks I will look into this, async route is new to me so I might need a tip.
I’ve logged out the page events and I cannot get my head round it, obviously they overlap but I can’t see where my page would break because of this

[Log] map pageInit
[Log] map pageBeforeIn
[Log] map pageAfterIn
[Log] map pageInit
[Log] map pageBeforeIn
[Log] map pageBeforeOut
[Log] map pageAfterIn
[Log] map pageAfterOut

But really I just want to prevent the link to itself.

4

This solved it :slight_smile:

routes: [
  {
    path: '/map/code/:code?/',
    name: 'map',
    alias: '/map/',
    async(routeTo, routeFrom, resolve, reject) {
      if (routeTo.name !== routeFrom.name) {
        resolve({componentUrl: './pages/map.html'});
      } else {
        reject();
      }
    }
  }
]
3 Likes