Issue with accessing this.$router.params in VueRouter

Question

Slight strange one. i thought I knew how VueRouter works, but I am having trouble accessing a param that I am passing into a bound router-link.

Within '@/views/Home.vue':

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

I have the following routes:

'@/routes/index.js:f

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

So I know the named route exists.

However, when clicking on the link - nothing.

'@/views/Home.vue'

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

I believe the issue is that this is within the Home.vue component/view - and is pushing to the same view, so nothing is happening...when navigating back to the route with name 'home', the created() call isn't made? Where/when should I be accessing this.$route.params in the lifecycle methods?

Versions:

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

Sounds like router.vuejs.org/guide/essentials/…. I would add that it is an abuse of routing to pass a param that isn't included in the path. — skirtle

Matthias S Matthias S · Accepted Answer · 2019-11-05T10:15:23

Since your view has already been created, the created lifecycle hook is not called again. Vue Router has it's own lifecycle methods that you can use for this purpose, see Vue Router In-Component Guards

In your case, you want to use beforeRouteUpdate.

An example implementation would be:

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

Issue with accessing this.$router.params in VueRouter

1 Answers