Question

这就是我的路由器的样子：

export default new VueRouter({
    mode: 'history',
    routes: [

        /**
         * Authentication
         */

        {   name: 'login',
            path: '/',
            component: Login,
            guest: true
        },

        {   name: 'registration',
            path: '/registreer',
            component: Registration,
            guest: true
        },

        /**
         * Forum
         */

        {   name: 'forum',
            path: '/forum',
            component: Forum,
            auth: true
        },
    ]
});

现在，当我转到auth时，我想获得/forum值。我如何获得这个价值？我在the docs中找不到任何内容。

已经尝试过这个：

router.beforeEach((to, from, next) => {
    console.log(to.auth);
    next()
});

但没有出现，只有undefined。

有什么想法吗？

Answer 1

这是 Vuex - https://vuex.vuejs.org/en/intro.html

的一个很好的用例

Vuex 允许您维护应用程序的状态，还可以存储各种API响应，这样您就不必在其他组件中重新加载相同的数据。

在您的具体情况下，如果forum可用，您的auth组件可以检查Vuex状态（可以在created或mounted处理程序中完成）。如果auth不可用，那么您应该立即使用this.$router.replace("/login")

重新路由到身份验证页面

在auth组件或login组件中，您可以正常进行身份验证。用户登录成功后，您可以将服务器响应存储在this.$store.state["auth"] - 所有组件全局可用的Vuex状态。这可以如下完成（作为Vuex商店中的突变）：

Vue.set(state, "auth", currentUserDetailsObject)

之后，您可以重定向到forum组件，其中auth可用this.$store.state，因此论坛可以继续正常显示该组件。

您可能需要一些加速时间来熟悉actions和mutations的概念，但是一旦您习惯了它，您会发现它对您应用的其余部分非常有用

Answer 2

我想你可以找到你想要的东西here。
你可能想知道Vuex。

然后你可以编写这样的代码。

if (!store.getters.auth) {
    next({
        path: '/login',
        query: {redirect: to.fullPath}
    })
}

如何获得路线参数

2 个答案: