Проблема с доступом к этому. $ Router.params в VueRouter - PullRequest
Новая
       28

Проблема с доступом к этому. $ Router.params в VueRouter

0 голосов
/ 05 ноября 2019

Незначительно странный. я думал, что знаю, как работает 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",

1 Ответ

0 голосов
/ 05 ноября 2019

Поскольку ваше представление уже создано, ловушка жизненного цикла created больше не вызывается. Vue Router имеет свои собственные методы жизненного цикла, которые вы можете использовать для этой цели, см. Vue Router In-Component Guards

В вашем случае вы хотите использовать beforeRouteUpdate.

Примером реализации будет: 

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