Vue Router router-link-exact-active for dynamic route

Question

I am trying to get the nav bar link Introduction to be active by default when using the dynamic variation of the route versus the default alias of just '/'.

When you visit the dynamic URL it looks like below (take note the 150/30/4.0 in the URL):

When you go the URL at just '/' then it looks correct and highlights the 'introduction' URL nav green.

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?

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.

App.vue

    <template>
      <div id="app">
        <div id="intro">
          <h3>TDFCalc for iPhone: User Guide</h3>
        </div>
        <div id="nav">
          <ul>
            <li>
              <router-link :to="{ name: 'Home' }">Introduction</router-link>
            </li>
            <li>
              <router-link to="/conventional">Conventional</router-link>
            </li>
            <li>
              <router-link to="/hyperfractionation">Hyperfractionation</router-link>
            </li>

            <li>
              <router-link to="/concomitant-boost">Concomitant Boost</router-link>
            </li>
            <li>
              <router-link to="/ldr">I-125 (LDR)</router-link>
            </li>
          </ul>
        </div>
        <router-view />
      </div>
    </template>

    <style>
    #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;
    }
    </style>

Routers - index.js

    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: () => import('../views/Conventional.vue')
      },
      {
        path: '/hyperfractionation',
        name: 'Hyperfractionation',
        component: () => import('../views/Hyperfractionation.vue')
      },
      {
        path: '/concomitant-boost',
        name: 'ConcomitantBoost',
        component: () => 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

EDIT:

I recently changed the app.vue 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.

    <template>
      <div id="app">
        <div id="intro">
          <h3>TDFCalc for iPhone: User Guide</h3>
        </div>
        <div id="nav">
          <ul>
            <li>
              <router-link :to="{ name: 'Home' }">Introduction</router-link>
            </li>
            <li>
              <router-link :to="{ name: 'Conventional' }">Conventional</router-link>
            </li>
            <li>
              <router-link :to="{ name: 'Hyperfractionation' }">Hyperfractionation</router-link>
            </li>

            <li>
              <router-link :to="{ name: 'ConcomitantBoost' }">Concomitant Boost</router-link>
            </li>
            <li>
              <router-link :to="{ name: 'Ldr' }">I-125 (LDR)</router-link>
            </li>
          </ul>
        </div>
        <router-view />
      </div>
    </template>

    <style>
    #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;
    }
    </style>

Answer 1

It's because of the ?s in your home route. The ? indicates the end of the path and the beginning of the query, so that syntax is incorrect. The route should look like this:

path: '/:doseperfraction/:numoffractions/:alphabeta',
name: 'Home',
component: Home,
alias: '/',
props: true

Link to the docs for more info