Ionic 3 Deeplinker Base Url

Ionic Framework ionic-v3
1

I upgraded my Ionic 2 app to version 3 and successfully updated the Deeplinker to the new system with @IonicPage(). I’m wondering however, how can I set a page to the base url?

For instance my home.component should route to /#/ but instead it’s to /#/home.

I tried setting @IonicPage({segment:''}) but this didn’t work, it just used the name value. Currently I have left segment:'home' but is there a way to set a page as the base?

2

After reading the source and many attempts I realized I can set my homepage to the following.

@IonicPage({name: '', segment: ''})

This seems like a hack, but it works for now. If this is the expected behavior, it really should be documented.

3

After further development I realize the above example is clearly not the intended approach. There is no way to link to the root page through a string name, so I have to pass the class name like previously. Also the defaultHistory doesn’t work either, since it needs an array of strings and an empty string is discarded.

My solution, for anyone else in this situation, has several steps.

  1. Add your home page module to the app module imports.
  2. In your other pages that will need the defaultHistory to work,
    a. remove defaultHistory from @IonicPage().
    b. in the templates ion-navbar add a conditional home button.
    c. in the component in ngOnInit set the buttons conditional variable to be true if the this.navController.length() <= 1.
    d. when clicking the button the nav controller should push the home page with the <NavOptions>{direction:'back'}.
    e. optionally make this a component to easily add in multiple pages.

This is a hack but it works. Can the Ionic team please fix this issue of not updating the url while the root view controller is active.

4

Sign in to GitHub · GitHub or even Pull requests · ionic-team/ionic-framework · GitHub :wink:

5

I expected the new deep link system to work in similar fashion and made a feature request.