vue.이것 좀 봐주세요.$120 정의되지 않음

vue.이것 좀 봐주세요.$120 정의되지 않음

나는 정의되지 않고 있다.

this.$disclossible

App.vue 및 기타 구성 요소에 정의되어 있지 않습니다.해결책을 찾을 수 없었어요.

여기 제 메인 프로그램의 일부가 있습니다.

Vue.use(VueRouter);
Vue.use(VueResource);

const router = new VueRouter({
    routes: Routes,
    mode: 'history'
});

new Vue({
    el: '#app',
    render: h => h(App),
    router
});

그리고 여기 main.js에 Import하는 라우터.js가 있습니다.

export default [
    {path: '/', component: Home, name: 'home'},
    {path: '/home', component: Home, name: 'home2'},
    {path: '/user/login', component: Login, name: 'userLogin'}
];

감사합니다:)

편집

이렇게 스크립트 태그에다가 쓰고 있었는데

<script>
    import HeadNavBar from './components/HeadNavBar.vue';
    import SideBarNav from './components/SideBarNav.vue';
    import Home from './components/Home.vue';


    console.log(this.$router,pus); //the undefined type

    export default {
        name: 'app',
        data() {
            return {
                isLogin: true
            }
        },
        components: {
            'app-headnav': HeadNavBar,
            'app-sidebarnav': SideBarNav,
            'app-home': Home
        }

    }
</script>

메서드 섹션으로 옮기자 원하는 반응이 나왔어요.

export default {
    name: 'app',
    data() {
        return {
            isLogin: true
        }
    },
    components: {
        'app-headnav': HeadNavBar,
        'app-sidebarnav': SideBarNav,
        'app-home': Home
    },methods: {
        myFunc: function() {
            console.log(this.$router,pus); // this gave result
        }
    }
}

재현할 수 있는 것은undefined에 대한 오류.this.$router화살표 기능을 사용하는 경우(아마도 그렇게 하고 있을 수 있습니다), Vue 설명서에서 권장하는 다음 사항에 반대합니다.

옵션 속성 또는 콜백에 화살표 기능을 사용하지 마십시오.created: () => console.log(this.a)또는vm.$watch('a', newValue => this.myMethod())화살표 함수는 부모 컨텍스트에 바인딩되어 있기 때문에thisVue 인스턴스가 예상대로 되지 않아 종종 다음과 같은 오류가 발생합니다.Uncaught TypeError: Cannot read property of undefined또는Uncaught TypeError: this.myMethod is not a function.

예를 들어 다음과 같습니다.mounted콜백 로깅this.$router성공:

<script>
  export default {
    name: 'app',

    // DON'T USE ARROW FUNCTIONS HERE
    // mounted: () => {
    //   console.log({router: this.$router});
    // },

    mounted() {
      console.log({router: this.$router});
    }
  }
</script>

이게 오래됐다는 건 알지만, 내가 마주친 어떤 것과 내가 어떻게 극복했는지 누군가 밖에서 힘들어 할 때를 대비해서 알려줄게.

저의 시나리오는 vue/meteor 프로젝트입니다.

함수/핸들러에서 "this"는 함수의 대상을 의미하므로, 이는 함수의 목표입니다.$120은 함수 내 또는 타겟 자체에서 $120을 찾고 있습니다.

    ///////DOESN'T WORK ///////////
  mounted: function () {
    $(document).on('click', '.element', function(){
             //this is recognized as 
             this.$router.push(PATH)
        });
  },


    ////////THIS WORKS//////////
  mounted: function () { 
    //make router defined outside of function.
    var navigate = this.$router;

     $(document).on('click', '.element', function(){
        navigate.push(PATH)
     });
  }

같은 에러가 발생하고 있습니다.이 경우는, 다음과 같이 라우터 파일을 컴포넌트에 Import 하면, 정상적으로 동작합니다.

컴포넌트의 라우터 파일/설정을 Import합니다.

import router from '../router'

이렇게 사용할 수 있습니다.

router.replace('home')

그리고 그것은 효과가 있을 것이다.

전체 코드:

<script>
import router from '../router'
export default {
  methods: {
  signIn: function () {
    firebase
    .auth().signInWithEmailAndPassword(this.email, this.password).then(
      function (user) {
        router.replace('home')
      },
      function (err) {
        alert('Maaf, ' + err.message)
      }
    )
  }
 }
}
</script>

그console.log(this.$router,pus)보다 위에export컴포넌트를 Import할 때 실행됩니다.구성 요소가 생성되기 전에 발생했습니다.그렇게this빈 객체에 불과합니다.{}.

당신은 그것을 얻어야 한다.this.$routerexport 객체의 메서드 내에 있습니다.

언급URL : https://stackoverflow.com/questions/46983742/vue-js-this-router-undefined