如何获取路由参数

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
        },
    ]
});

现在我想在转到 /forum 时获得 auth 值。我如何获得该值？我在 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 响应，这样您就不必在其他组件中重新加载相同的数据.

在您的特定情况下，如果 auth 可用，您的 forum 组件可以检查 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}
    })
}

如何获取路由参数

How to get a route param

vue.js

vue-router