在VueRouter中访问this。$ router.params的问题

Question

有点奇怪。我以为我知道VueRouter的工作原理，但是我无法访问传递到绑定路由器链接的参数。

在'@/views/Home.vue'内：

<router-link
    class="ml-1"
    :to="{ name: 'home', params: { activeInstructorSet: false }}"
>
    Switch
</router-link>

我有以下路线：

'@/routes/index.js：f

const routes = [
  {
    path: "/",
    name: "home",
    component: () => import(/* webpackChunkName: "about" */ "@/views/Home.vue"),
  }
];

所以我知道命名路由存在。

但是，当单击链接时-没有任何内容。

'@/views/Home.vue'

created() {
    console.log(this.$route);
    this.activeInstructorSet = this.$route.params.activeInstructorSet;
},

我认为问题在于它在Home.vue组件/视图中-并推送到相同的view，所以什么也没有发生……当导航回到名称为“ home”的路线时，没有进行created()通话吗？生命周期方法中我应该在哪里/何时访问this.$route.params？

版本：

"vue": "^2.6.10",
"vue-router": "^3.1.3",

Answer 1

由于已经创建了视图，因此不会再次调用created生命周期挂钩。 Vue Router具有自己的生命周期方法，可用于此目的，请参见Vue Router In-Component Guards

您要使用的是 beforeRouteUpdate。

示例实现为：

beforeRouteUpdate(to, from, next) {
    console.log(to);
    this.activeInstructorSet = to.params.activeInstructorSet;
    next();
},