title: this.$route.name is getting as null in vue router
body: <pre><code>&lt;template&gt;
    &lt;router-link :to="{ name: 'work', params: { projectId: $store.state.projectId }}"&gt;Work&lt;/router-link&gt;
  &lt;/template&gt;
  
  &lt;script lang="ts"&gt;
  import { Component, Vue } from 'vue-property-decorator';
  
  @Component()
  export default class NavBar extends Vue {
  
    public activeIndex: string;
  
    public mounted() {
      // TODO: Below name is getting as null
      this.activeIndex = this.$route.name;
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>My router is defined as below.</p>
  
  <pre><code>const router = new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [
      {
        path: '/',
        name: 'home',
        component: Home,
      },
      {
        path: '/work/project/:projectId',
        name: 'work',
        component: () =&gt; import('./views/Work.vue'),
      },
    ],
  });
  </code></pre>
  
  <p>When I hit following url  in browser, I get 'this.$route.name' as 'home'</p>
  
  <p><a href="https://localhost/" rel="nofollow noreferrer">https://localhost/</a></p>
  
  <p>When I hit following url in browser, I get <code>this.$route.name</code> as null.</p>
  
  <p><a href="https://localhost/work/project/38" rel="nofollow noreferrer">https://localhost/work/project/38</a></p>
  
  <p>so what's wrong that I am not getting 'work' as <code>this.$route.name</code>  when hitting above url?</p>
  
  <p>output of console.log(this.$route);</p>
  
  <pre><code>fullPath: "/"
  hash: ""
  matched: []
  meta: {}
  name: null
  params: {}
  path: "/"
  query: {}
  </code></pre>