How to detect active route?

[胡亚雄]

Lets say I have some tabs at the bottom of the page, each tab relates to a corresponding route, When I click a tab, I want to give some highlight to this tab so the user knows that he clicked this tab, so how could I detect it?

<Page actionBarHidden="true">
    <GridLayout rows="*, auto">
      <Navigator :defaultRoute="isLoggedIn ? '/home' : '/login'"/>
      <GridLayout id="bottom-bar" backgroundColor="#fff" row="1" columns="*">
        <FlexboxLayout justifyContent="space-around" alignItems="center" class="nav" col="0" >
          <Label @tap="goTo('/home')" text.decode="&#xe607;"
                 class="iconfont"/>
          <Label @tap="goTo('/home')" text.decode="&#xe609;"
                 class="iconfont"/>
          <Label @tap="goTo('/profile')" text.decode="&#xe60a;"
                 class="iconfont"/>
          <Label @tap="goTo('/profile')" text.decode="&#xe608;"
                 class="iconfont"/>
        </FlexboxLayout>
      </GridLayout>
    </GridLayout>
  </Page>

Codes above are the structure I have.

[Igor Randjelovic]

$navigator.path will contain the active path. You could apply a class to the current item

<Label @tap="goTo('/profile')" 
   text.decode="&#xe608;"
  :class="{ active: $navigator.path === '/profile' }"
   class="iconfont"/>

[胡亚雄]

$navigator.path will contain the active path. You could apply a class to the current item

<Label @tap="goTo('/profile')" 
   text.decode="&#xe608;"
  :class="{ active: $navigator.path === '/profile' }"
   class="iconfont"/>

thank u, it works as expected