title: Vue Router router-link-exact-active for dynamic route
body: <p>I am trying to get the nav bar link Introduction to be <strong>active</strong> by default when using the <strong>dynamic variation of the route</strong> versus the <strong>default alias</strong> of just <strong>'/'</strong>.</p>
  
  <p>When you visit the dynamic URL it looks like below (take note the 150/30/4.0 in the URL):</p>
  
  <p><a href="https://i.stack.imgur.com/3QpAN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3QpAN.png" alt="enter image description here"></a></p>
  
  <p>When you go the URL at just '/' then it looks correct and highlights the 'introduction' URL nav green.</p>
  
  <p><a href="https://i.stack.imgur.com/5pzT9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5pzT9.png" alt="enter image description here"></a></p>
  
  <p><strong>These both go to the same route named 'Home' so I don't understand why it doesn't show as active for just the '/' route and not the dynamic one?</strong></p>
  
  <p>I have tried re-arranging the routes, making the parameters not optional and many other things to no avail.  I'm not sure how to do this properly with Vue as I'm still learning the framework and could not find any information on this issue.</p>
  
  <p><strong>App.vue</strong></p>
  
  <pre class="lang-vue prettyprint-override"><code>    &lt;template&gt;
        &lt;div id="app"&gt;
          &lt;div id="intro"&gt;
            &lt;h3&gt;TDFCalc for iPhone: User Guide&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div id="nav"&gt;
            &lt;ul&gt;
              &lt;li&gt;
                &lt;router-link :to="{ name: 'Home' }"&gt;Introduction&lt;/router-link&gt;
              &lt;/li&gt;
              &lt;li&gt;
                &lt;router-link to="/conventional"&gt;Conventional&lt;/router-link&gt;
              &lt;/li&gt;
              &lt;li&gt;
                &lt;router-link to="/hyperfractionation"&gt;Hyperfractionation&lt;/router-link&gt;
              &lt;/li&gt;
  
              &lt;li&gt;
                &lt;router-link to="/concomitant-boost"&gt;Concomitant Boost&lt;/router-link&gt;
              &lt;/li&gt;
              &lt;li&gt;
                &lt;router-link to="/ldr"&gt;I-125 (LDR)&lt;/router-link&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
          &lt;router-view /&gt;
        &lt;/div&gt;
      &lt;/template&gt;
  
      &lt;style&gt;
      #app {
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
      }
  
      #nav {
        padding: 5px;
      }
  
      #nav a {
        font-weight: bold;
        color: #2c3e50;
      }
  
      /* #nav a.router-link-active {
        color: #ff0000;
      } */
  
      #nav a.router-link-exact-active {
        color: #42b983;
      }
  
      ul {
        padding: 0px;
        margin: 0px;
        list-style-type: none;
      }
      h3 {
        margin: 20px 0 0;
      }
      li {
        margin: 5px 5px;
        /*display: inline-block;*/
      }
      a {
        color: #42b983;
      }
      &lt;/style&gt;
  </code></pre>
  
  <p><strong>Routers - index.js</strong></p>
  
  <pre class="lang-vue prettyprint-override"><code>    import Vue from 'vue'
      import VueRouter from 'vue-router'
      import Home from '../views/Home.vue'
  
      Vue.use(VueRouter)
  
      const routes = [
        {
          path: '/conventional',
          name: 'Conventional',
          component: () =&gt; import('../views/Conventional.vue')
        },
        {
          path: '/hyperfractionation',
          name: 'Hyperfractionation',
          component: () =&gt; import('../views/Hyperfractionation.vue')
        },
        {
          path: '/concomitant-boost',
          name: 'ConcomitantBoost',
          component: () =&gt; import('../views/ConcomitantBoost.vue')
        },
        {
          path: '/:doseperfraction?/:numoffractions?/:alphabeta?',
          name: 'Home',
          component: Home,
          alias: '/',
          props: true
        }
      ]
  
      const router = new VueRouter({
        mode: 'history',
        base: process.env.BASE_URL,
        routes
      })
  
      export default router
  </code></pre>
  
  <p><strong>EDIT:</strong></p>
  
  <p>I recently changed the <strong>app.vue</strong> file to this, making sure all the routes refer to the 'named' versions of the routes in case this was the issue but still nothing.</p>
  
  <pre class="lang-vue prettyprint-override"><code>    &lt;template&gt;
        &lt;div id="app"&gt;
          &lt;div id="intro"&gt;
            &lt;h3&gt;TDFCalc for iPhone: User Guide&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div id="nav"&gt;
            &lt;ul&gt;
              &lt;li&gt;
                &lt;router-link :to="{ name: 'Home' }"&gt;Introduction&lt;/router-link&gt;
              &lt;/li&gt;
              &lt;li&gt;
                &lt;router-link :to="{ name: 'Conventional' }"&gt;Conventional&lt;/router-link&gt;
              &lt;/li&gt;
              &lt;li&gt;
                &lt;router-link :to="{ name: 'Hyperfractionation' }"&gt;Hyperfractionation&lt;/router-link&gt;
              &lt;/li&gt;
  
              &lt;li&gt;
                &lt;router-link :to="{ name: 'ConcomitantBoost' }"&gt;Concomitant Boost&lt;/router-link&gt;
              &lt;/li&gt;
              &lt;li&gt;
                &lt;router-link :to="{ name: 'Ldr' }"&gt;I-125 (LDR)&lt;/router-link&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
          &lt;router-view /&gt;
        &lt;/div&gt;
      &lt;/template&gt;
  
      &lt;style&gt;
      #app {
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
      }
  
      #nav {
        padding: 5px;
      }
  
      #nav a {
        font-weight: bold;
        color: #2c3e50;
      }
  
      /* #nav a.router-link-active {
        color: #ff0000;
      } */
  
      #nav a.router-link-exact-active {
        color: #42b983;
      }
  
      ul {
        padding: 0px;
        margin: 0px;
        list-style-type: none;
      }
      h3 {
        margin: 20px 0 0;
      }
      li {
        margin: 5px 5px;
        /*display: inline-block;*/
      }
      a {
        color: #42b983;
      }
      &lt;/style&gt;
  </code></pre>