Маршрут к последнему активному дочернему компоненту - PullRequest
Новая
       6

Маршрут к последнему активному дочернему компоненту

0 голосов
/ 15 мая 2018

Я пытаюсь реализовать концептуально простую проблему, но это оказывается настоящей болью.

У меня есть вложенные маршруты, которые выглядят так: 

-Foo
    -foo1 (default)
    -foo2
-Bar
    -bar1 (default)
        -fubar1 (default)
        -fubar2
    -bar2

Foo и Bar - это ссылки в навигационной панели.Их прямые дочерние маршруты находятся на боковой панели, на отдельных страницах.Всякий раз, когда я направляю к ссылке на панель навигации, я хочу, чтобы их последний активный дочерний элемент был перенаправлен на.

Пример маршрутизации:

  1. Посещения пользователя Foo, foo1 активирован.
  2. посещения пользователя foo2.
  3. посещения пользователя Bar, bar1 активирован.
  4. посещения пользователя bar2.
  5. посещения пользователя Foo, foo2 активировано.(последний активный потомок Foo направляется в)
  6. Пользователь посещает Bar, bar2 активирован.(последний активный дочерний элемент Bar направляется в)

Мое текущее решение включает средства защиты компонентов: 

export default {
    ...,
    beforeRouteEnter (to, from, next) {
        next(vm => {
            let lastActive = vm.$store.state.lastActivePaths[vm.$options.name]
            if (lastActive) {
                next(lastActive)
            } else {
                next()
            }
        })
    },
    beforeRouteLeave (to, from, next) {
        this.$store.commit(SET_LAST_ACTIVE_PATH, {
            routeName: this.$options.name,
            path: from.path
        })
        next()
    },
}

Vuex: 

export default new Vuex.Store({
    state: {
        lastActivePaths: {},
    },
    mutations: {
        [SET_LAST_ACTIVE_PATH](state, payload) {
            let { routeName, path } = payload
            Vue.set(state.lastActivePaths, routeName, path)
        },
    },
})

It"работает", но требует логики в 2 разных местах и ​​может быстро стать беспорядком.Есть ли более простое решение?

...