this.$route.name 在 vue 路由器中为空

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>

我的路由器定义如下。

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'),
    },
  ],
});

当我在浏览器中点击以下网址时，我得到 'this.$route.name' 作为 'home'

https://localhost/

当我在浏览器中点击以下网址时，我得到 this.$route.name 为空。

https://localhost/work/project/38

那么，当我点击上面的 url 时，我没有像 this.$route.name 一样得到“工作”，这是怎么回事？

console.log(this.$route) 的输出；

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

Answer 1

到目前为止，我能够进行以下管理。仍然有更好的答案。

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

Answer 2

Home 和 Work 路由的区别在于组件的延迟加载。 'home' 组件不像'work' 那样延迟加载。如果在调用挂载之前未加载组件，将导致您获得空值。为了克服这个问题，您可以将“工作”组件加载为急切加载。但请注意，这可能会增加捆绑包的大小。见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,
                                },
                              ],
                          });