Vue-router: [Feature Request] v-link activeParent property

[KingMario]

In some cases, when the activeClass is set for _v-link_, upon path match, one might want to apply the class to the parent or an ancestor element of the _v-link_-ed element.

For example, in Bootstrap navbar, when the _v-link_ is applied to an <a> element, the active class is wanted to be applied to the <li> element.

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a v-link="{path: '/', exact: true}"><img class="logo" src="./assets/logo.png"></a>

      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-items" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>

    <div class="collapse navbar-collapse" id="navbar-items">
      <ul class="nav navbar-nav">
        <li v-link="{path: '/jobs', activeClass: 'active'}" @click="getJobs"><a href="javascript:void(0)">Jobs</a></li>
        <!--the link will appear somewhere else in the app, so a reusable component is better-->
        <li><jobs-link>Jobs</jobs-link></li>
      </ul>
    </div>
  </div>
</nav>

The template part of JobsLink.vue

<a href="javascript:void(0)" v-link="{path: '/jobs', activeClass: 'active'}" @click="getJobs">
  <slot></slot>
</a>

The first <li> element has a _v-link_ property directly set in itself and the activeClass will be applied to it.
The second <li> element has a reusable component with a _v-link_ property set. Obviously, the activeClass will be applied to the <a> element if there is no activeParent property for _v-link_.

If an _activeParent_ property for v-link is avaliable and set to a boolean value or an integer, upon path match, the activeClass will be applied instead to the parent element or _n_-th parent element with high flexibility.

<li><jobs-link :active-parent="true">热招岗位</jobs-link></li>

Modified template for JobsLink.vue

<a href="javascript:void(0)" v-link="{path: '/jobs', activeClass: 'active', activeParent: activeParent}" @click="getJobs">
  <slot></slot>
</a>

Hope I'm clearly expressed.

[chrisvfritz]

I think the v-link-active directive is what you're looking for.