2016-12-27 3 views
1

Сценарий:Как я могу повторно инициализировать те же компоненты в различных маршрутах

У меня есть форма многоступенчатый, если пользователь нажимает на следующую кнопку, единственное, что изменения в маршруте является идентификатор, например, form /step/:id, но всякий раз, когда у меня есть шаги/маршруты, которые содержат те же компоненты, что и предыдущий, он вызывает только «созданный» метод компонентов первого, он не вызывает следующий.

Есть ли способ воссоздать/инициализировать компоненты каждый раз, когда я меняю маршруты?

ответ

1

Вы можете посмотреть раздел на «Реагируя Params Перемен» в docs

Одна вещь, чтобы обратить внимание при использовании маршрутов с Params является то, что, когда пользователь переходит из/пользователя/Foo в/пользователя/бар , тот же экземпляр компонента будет повторно использован. Поскольку оба маршрута отображают один и тот же компонент, это более эффективно, чем уничтожение старого экземпляра, а затем создание нового. Однако это также означает, что крючки жизненного цикла компонента не будут вызываться.

Чтобы реагировать на Params изменения в одном компоненте, вы можете просто наблюдать объект $ маршрута:

watch: { 
    '$route' (to, from) { 
     //update the variables with new route params 
    } 
    }, 

Вы также можете посмотреть на мой аналогичный ответ here.

+0

Это сработало! Большое спасибо :) –

0

У меня еще одна проблема. Всякий раз, когда меняются параметры маршрута, реквизиты, которые я передал этому компоненту, не обновляются.

При первой загрузке значение поддержки обновляется, но когда я перехожу к следующему шагу/маршруту, обновляется $route, а также выполняется метод внутри часов, но значение передаваемого пропущенного символа так же, как значение первого шага/маршрута. Затем, когда я снова перехожу к следующему шагу/маршруту, значение компонента третьего шага/маршрута, предположительно, является значением компонента второго шага/маршрута. Похоже, что стоимость реквизита на 1 шаг ниже фактического маршрута.

Вот как я прошел пропеллер:

<el-repeater :element.sync="element"></el-repeater> 

Редактировать: Но все данные, которые можно увидеть в пользовательском интерфейсе обновляются и правильно, и эти данные основаны на опоре, имеющей был принят.

Смежные вопросы