0

Есть список вопросов, который хранится в складе 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 ответ 1

1

Зачем отслеживать изменения роутера в компоненте. Компонент это Вью. Роутер это контроллер.

Как обычно делают.

Всю логику роутера выносят в файл - например в файл /router/index.js

В компонентах используют или router-link или прямо пушат роутеру маршруты this.$router.push('...') this.$router.push({ name: '...', params: { ... } }) В роутере обрабатывают события

По описанию не понятно зачем так всё усложнять. Представим что вопрос отображается по опрделённому URL. Просто заводим в стор объект "текущий вопрос". Заводим коневой элемент компонент "вьюшку". Все компоненты по отношению к вьюшке дочерние. Только вьюшка может менять "текущий вопрос". Все больше ничего делать не нужно. Компонеты всегда обращаются в стор к текушему вопросу. Компонент кнопка пушит новый маршрут роутеру. Роутер кидает вьюшке параметры. Вьюшка меняет в зависимости от параметров "текущий вопрос" в сторе. "Текуший вопрос" реактивно связан с маршрутом в роутере, с компонентами которые его отображают. Никакие хуки не нужны.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.