Search code examples
vue.jsvuepress

vuepress router-link active styling not working

I have a basicNotation.md file, which routes fine. 

<router-link to="/basicNotation">Test</router-link>

However when this is rendered, and i route to it, this is the result:

<a href="/basicNotation" class="">Test</a>

Note how there is no class applied to the anchor tag!

The render should look like this, according to the vuejs docs: https://router.vuejs.org/api/#active-class

<a href="/basicNotation" class="router-link-exact-active router-link-active">Test</a>

Where am I going wrong?

Solution

  • Okay, I added the file extension to the path:

    <router-link to="/basicNotation.html">Test</router-link>

    And it works, as far as I can tell. Renders to this:

    <a href="/basicNotation.html" class="router-link-exact-active router-link-active">Test</a>

    I'm still open to better solutions.