如何在我的 vuejs 组件中注入 router.beforeEach 中的数据？答案

【问题标题】：How can I inject data get in router.beforeEach in my vuejs component?如何在我的 vuejs 组件中注入 router.beforeEach 中的数据？
【发布时间】：2017-01-20 08:34:11
【问题描述】：

我使用 router.beforeEach 来保护某些视图。我在进入我的 vue 之前获取我的用户。我想在所有经过身份验证的页面中使用此用户。如何在我的 vuejs 组件中注入 router.beforeEach 中的数据？

这是我的路线定义：

import Vue from 'vue';
import VueRouter from 'vue-router';
import AuthService from './services/AuthService';

import Index from './pages/Index.vue';

Vue.use(VueRouter);

const routes = [
    {path: '/', name: 'index', component: Index, meta: {requiresAuth: true}},
    ...
];

const router = new VueRouter({
    routes
});

router.beforeEach((to, from, next) => {
    if (to.matched.some(record => record.meta.requiresAuth)) {
        AuthService().getUser(user => {
            if (user) {
                next(vm => {
                    vm.user = user
                });
            } else {
                ...
            }
        });
    }
    ...
});

export default router;

这里是我的 Index.vue

<template>
    <div>
        {{user}}
    </div>
</template>
<script type="text/ecmascript-6">
    export default {
        data(){
            console.log(this.user);
            console.log(this.$route.user);
            return {}
        },
        mounted(){
            console.log(this.user);
            console.log(this.$route.user);
        }
    }
</script>

一切都未定义

我不想在我的组件中创建beforeRouteEnter，因为它会进行第二次 API 调用。

【问题讨论】：

你在使用 Vuex 商店吗？
@TusharArora 如果在 vue-router 中没有解决方案，我将使用 vuex。我现在尽量避免使用 vuex。
你的代码对我来说工作正常

标签： vuejs2 vue.js vue-router

【解决方案1】：

我通常将文件分开，然后将js文件导入我的页面，这是我实现beforeEach规则的方式：

路线文件：

import VueRouter from 'vue-router';

let routes = [
  {
    path: '/',
    component: require('./views/Home')
  },
  {
    path: '/about',
    component: require('./views/About'),
  }
];

export default new VueRouter({
    routes,
});

Vue 应用文件：

import router from './routes';

// Here goes my logic
router.beforeEach((to, from, next) => {
    if ( from.name == 'About' ) {
        next(false);
    } else {
        next();
    }
});

const app = new Vue({
    el: '#app',

    router
});

希望对你有帮助！

【讨论】：

【解决方案2】：

我看到了 3 个问题：

1) vue-router 文档显示您可以访问组件的beforeRouteEnter 中的next 中的虚拟机，而不是全局beforeEach。

2) 在next 中，已经创建了虚拟机，因为您可以访问它的属性，因此您将无法在data 函数中看到this.user。可能在mounted函数中，但是我们不知道vm是在组件挂载之前还是之后返回的。

3) 你不应该在 vm 上设置顶级属性，因为它们不会是响应式的：参见 https://vuejs.org/v2/api/#data 和 https://vuejs.org/v2/api/#Vue-set 。

也许您的AuthService 可以存储用户，而您的组件从那里获取用户？

【讨论】：