Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Expose child routes on currentRoute object; add property for a CSS class on inactive routes #1650

Closed
wants to merge 3 commits into from

Commits on Jul 27, 2017

  1. feat(router-link): add 2 properties for a CSS class on inactive route…

    …s (linkInactiveClass, linkExactInactiveClass)
    
    There are non-trivial situations where playing with CSS selectors becomes too inconvenient. Consider the following markup:
        <div>
          <div class="tabs_account">
            <div class="tab_spacer">&nbsp;</div>
            <template v-for="page in $router.currentRoute.parent.children" v-if="page.can_show">
              <router-link tag="div" active-class="tab_active" inactive-class="tab" v-bind:to="page.path">{{ page.title }}</router-link>
              <div class="tab_spacer">&nbsp;</div>
            </template>
            <div class="tab_fill tab_spacer">&nbsp;</div>
          </div>
          <router-view></router-view>
        </div>
    You can achieve the same effect like this
    <router-link :class="{'router-link-active': $route.fullPath ==='/' || $route.fullPath === '/a'}" to="/a"></router-link>
    but it looks hacky (you have to keep the PATH in HTML in sync with the JavaScript code) while my proposed solution feels more elegant.
    tmcdos committed Jul 27, 2017
    Configuration menu
    Copy the full SHA
    9ad0d14 View commit details
    Browse the repository at this point in the history
  2. feat(core): publish 3 new properties on $route.currentRoute (children…

    …, parent, title)
    
    It is not easy to get access to child routes when you need to render nested menus with <router-link>
    Publishing "children" on the $route.currentRoute solves a real problem. The "parent" property is required so that the route can see its siblings. The "title" property is optional - it is useful instead of "name" when you want to name a route having a default child. I personally use "name" in beforeRouteEnter/beforeRouteUpdate to update the "document.title" in browser - and I need it on all routes (even with default child), so I had to add "title" property.
    
    This closes issue #1149
    tmcdos committed Jul 27, 2017
    Configuration menu
    Copy the full SHA
    9a878fe View commit details
    Browse the repository at this point in the history

Commits on Jul 28, 2017

  1. feat(core): expose parent and child routes on currentRoute, add prope…

    …rty for CSS class on inactive router links
    
    The $router.currentRoute object now exposes "children[]" and "parent" properties.
    The <router-link> component has now properties "inactive-class" and "exact-inactive-class" for specifying CSS class on inactive routes.
    
    Solves issue #1149
    tmcdos committed Jul 28, 2017
    Configuration menu
    Copy the full SHA
    0cab997 View commit details
    Browse the repository at this point in the history