Question

我试图实现一个概念上简单的问题，但事实证明这是一个真正的痛苦。

我有嵌套的路线，如下所示：

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

Foo和Bar是导航栏中的链接。他们的直接子路线在侧栏中，在单独的页面上。每当我路由到导航栏链接时，我都希望将他们最后一个活动的孩子路由到。

路由示例：

用户访问Foo，foo1已激活。
用户访问foo2。
用户访问Bar，bar1已激活。
用户访问bar2。
用户访问Foo，foo2已激活。（Foo的最后一个活跃子项被路由到）
用户访问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)
        },
    },
})

它＆＃34;工作＆＃34;，但它需要两个不同位置的逻辑，很快就会变得一团糟。有更简单的解决方案吗？

路由到上一个活动子组件

0 个答案: