this.$route.name is getting as null in vue router

Question

<template>
  <router-link :to="{ name: 'work', params: { projectId: $store.state.projectId }}">Work</router-link>
</template>

<script lang="ts">
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;
  }
}
</script>

My router is defined as below.

const router = new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
    },
    {
      path: '/work/project/:projectId',
      name: 'work',
      component: () => import('./views/Work.vue'),
    },
  ],
});

When I hit following url in browser, I get 'this.$route.name' as 'home'

https://localhost/

When I hit following url in browser, I get this.$route.name as null.

https://localhost/work/project/38

so what's wrong that I am not getting 'work' as this.$route.name when hitting above url?

output of console.log(this.$route);

fullPath: "/"
hash: ""
matched: []
meta: {}
name: null
params: {}
path: "/"
query: {}

Answer 1

So far, I was able to manage as following. still open to better answer.

public created() {
    const unwatch = this.$watch(
      () => this.$route,
      (route, prevRoute) => {
        this.activeIndex = route.name;
        unwatch();
      });
  }

Answer 2

The difference between the Home and Work routes is that of lazy-loading of components. The 'home' component is not lazy-loaded where as the 'work' is. The component if not loaded before mounted is called, will result in the null values you getting. To overcome this, you can load the 'work' component as eager-loaded. But beware that this can the size of bundle to increase. See https://router.vuejs.org/guide/advanced/lazy-loading.html

    import Work from "./views/Work.vue";
    const router = new Router({
                               mode: 'history',
                               base: process.env.BASE_URL,
                               routes: [
                                {
                                   path: '/',
                                   name: 'home',
                                   component: Home,
                                },
                                {
                                   path: '/work/project/:projectId',
                                   name: 'work',
                                   component: Work,
                                },
                              ],
                          });