vue.js this.$router 未定義

Question

我越來越不確定

這個.$路由器

在 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
        }
    }
}

Answer 1

我只能在使用箭頭函數（也許這就是你正在做的事情）時重現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 。

這是一個成功記錄this.$router的mounted回調示例：

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

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

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

Answer 2

我知道這已經過時了，但我會分享我遇到的一些事情以及我是如何解決它的，以防有人在那里掙扎。

我的場景是一個 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)
     });
  }

Answer 3

我們有同樣的錯誤，在這種情況下我已經修復了，我只是像這樣在我的組件中導入路由器文件並且它正在工作：

在我的組件中導入路由器文件/配置：

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>

Answer 4

export上面的console.log(this.$router,pus)是在導入組件時執行的。 它發生在組件創建之前。 所以this只是一個空對象{} 。

您應該在導出對象的方法中獲取this.$router 。