web-dev-qa-db-ja.com

vue.js this。$ router undefined

私は未定義になっています

this。$ router

app.vueおよびその他のコンポーネントでは未定義。解決策が見つかりませんでした。

ここに私のmain.jsの一部

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にインポートしているrouter.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
        }
    }
}
javascriptvue.jsvuejs2vue-router
9
sudo

矢印関数 （おそらくそれがあなたがしていること）を使用している場合、this.$routerのundefinedエラーのみを再現できます。これは Vueのドキュメント に対して推奨されます。

created: () => console.log(this.a)やvm.$watch('a', newValue => this.myMethod())などのオプションプロパティまたはコールバックで矢印関数を使用しないでください。矢印関数は親コンテキストにバインドされているため、thisは期待どおりVueインスタンスではないため、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>
9
tony19

これは古いことはわかっていますが、遭遇したことと、誰かがそこで苦労している場合にどうやってそれを回避したかを共有します。

私のシナリオは、Vue/Meteorプロジェクトです。

関数/ハンドラーでは、「this」は関数のターゲットを指しているため、this。$ routerは関数内またはターゲット自体内で$ routerを探しています。

    ///////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)
     });
  }
1
Jason Ulwelling

exportの上のconsole.log(this.$router,pus)は、コンポーネントのインポート時に実行されます。コンポーネントが作成される前に発生しました。したがって、thisは空のオブジェクト{}です。

エクスポートオブジェクトのメソッド内でthis.$routerを取得する必要があります。

1
DRL

同じエラーがあります。この場合は修正しました。次のようにコンポーネントにルーターファイルをインポートするだけで機能します。

私のコンポーネントにルーターファイル/設定をインポートする：

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>
0
Arian saputra