라우터에 데이터를 삽입하려면 어떻게 해야 합니까?각 vuejs 컴포넌트 전에?

라우터에 데이터를 삽입하려면 어떻게 해야 합니까?각 vuejs 컴포넌트 전에?

시야를 보호하기 위해 각각 전에 router를 사용합니다.vue에 입력하기 전에 사용자를 가져옵니다.인증된 모든 페이지에서 이 사용자를 사용하고 싶습니다.라우터에 데이터를 삽입하려면 어떻게 해야 합니까?각 vuejs 컴포넌트 전에?

다음은 경로 정의입니다.

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;

여기 my 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 호출이 이루어지기 때문에 컴포넌트에 저장해야 합니다.

저는 보통 파일을 분리한 후 js 파일을 제 페이지로 Import합니다.각 규칙을 구현하기 전에 다음과 같이 합니다.

1. 루트 파일:

   import VueRouter from 'vue-router';
   
   let routes = [
     {
       path: '/',
       component: require('./views/Home')
     },
     {
       path: '/about',
       component: require('./views/About'),
     }
   ];
   
   export default new VueRouter({
       routes,
   });
   

2. Vue App 파일:

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

도움이 됐으면 좋겠다!

3가지 문제가 있습니다.

1) vue-router 매뉴얼에는 VM에 액세스 할 수 있는 방법이 기재되어 있습니다.next컴포넌트의beforeRouteEnter, 글로벌하지 않다beforeEach.

2) 인next속성에 액세스할 수 있기 때문에 VM은 이미 생성되어 있기 때문에 확인할 수 없습니다.this.user에서data기능.아마 그 안에서...mounted기능하지만 VM이 반환되는 것은 컴포넌트가 마운트되기 전인지 후에 반환되는지는 알 수 없습니다.

3) VM의 최상위 속성은 반응하지 않으므로 설정하지 마십시오.https://vuejs.org/v2/api/ #data 및 https://vuejs.org/v2/api/ #Vue-set을 참조하십시오.

아마도 당신의AuthService사용자를 저장하고 컴포넌트가 사용자를 거기에서 가져올 수 있습니까?

언급URL : https://stackoverflow.com/questions/41759225/how-can-i-inject-data-get-in-router-beforeeach-in-my-vuejs-component