Хук beforeRouteUpdate для каждого router-link, vue-router
Есть список вопросов, который хранится в складе Vuex. Также в складе хранится номер выбранного вопроса, отображаемого во Vue. url отображает выбранный вопрос с помощью Vue-Router. По клику на кнопку происходит переход к следующему вопросу. В хуке beforeRouteUpdate на уровне компонента в склад пробрасывается изменение отображаемого вопроса. Все работает. Но хочется добавить переход к предыдущему вопросу. Тут возникают трудности. Выношу router-link в отдельный компонент - QuestionButton.vue, но хук тут уже не работает. Не понимаю, как сделать для каждого router-link отдельный рабочий хук.
TestQuestion.vue
<template>
<section>
<h1>Вопрос</h1>
<ul>
<question-button
v-bind:id="id"
v-bind:questionNumber="questionNumber-1"
v-bind:value="'Предыдущий вопрос'">
</question-button>
<question-button
v-bind:id="id"
v-bind:questionNumber="questionNumber+1"
v-bind:value="'Следующий вопрос'">
</question-button>
</ul>
</section>
</template>
export default {
components: {
'QuestionButton': QuestionButton
}
//Тут beforeRouteUpdate срабатывает. Но пробрасывать изменения в склад здесь не получится,
//т.к. для каждой кнопки необходимо пробрасывать свое значение.
}
QuestionButton.vue
<template>
<section>
<router-link :to="{
name: 'testing',
path: 'testing',
params: {
id: id,
questionNumber: questionNumber
}
}"
tag="li">
<input type="button" v-bind:value="value"/>
</router-link>
</section>
</template>
export default {
props: ['id', 'questionNumber', 'value'],
beforeRouteUpdate(to, from, next) {
//Не работает
}
}
Ответы (1 шт):
Зачем отслеживать изменения роутера в компоненте. Компонент это Вью. Роутер это контроллер.
Как обычно делают.
Всю логику роутера выносят в файл - например в файл /router/index.js
В компонентах используют или router-link или прямо пушат роутеру маршруты this.$router.push('...')
this.$router.push({ name: '...', params: { ... } })
В роутере обрабатывают события
По описанию не понятно зачем так всё усложнять. Представим что вопрос отображается по опрделённому URL. Просто заводим в стор объект "текущий вопрос". Заводим коневой элемент компонент "вьюшку". Все компоненты по отношению к вьюшке дочерние. Только вьюшка может менять "текущий вопрос". Все больше ничего делать не нужно. Компонеты всегда обращаются в стор к текушему вопросу. Компонент кнопка пушит новый маршрут роутеру. Роутер кидает вьюшке параметры. Вьюшка меняет в зависимости от параметров "текущий вопрос" в сторе. "Текуший вопрос" реактивно связан с маршрутом в роутере, с компонентами которые его отображают. Никакие хуки не нужны.