“TypeError：無法讀取未定義的屬性‘push’”Vuejs

Question

我正在使用 Vue Cli 但給出了這個錯誤。 我正在嘗試注冊，然后轉到索引頁面。 但是路由器在這里不起作用。

在 main.js 中，我將路由器用於 NProgress，在這里它可以工作，但為什么在這種情況下不可以呢？

main.js

import Vue from 'vue'
import VueRouter from 'vue-router';
Vue.use(VueRouter);

import router from './Router/routes.js'

import User from './Helpers/User'
window.User = User

new Vue({
  render: h => h(App),
  router,
}).$mount('#app')

用戶.js

import Axios from "axios";

class User {
    register(data) {
        let uri = 'http://localhost:8000/api/auth/register';
        let self = this;
        Axios.post(uri, data).then((res) => {
            self.$router.push({name:'Index'})
        }).catch( (error) => {
            console.log(error);
        });
    }
}

export default User = new User();

注冊.vue

<template>
  <div class="col-md-12">
    <div class="card card-container">
      
      <form name="form" @submit.prevent="handleRegister">
       ----
      </form>
   
  </div>
</template>
<script>
export default {
   data() { return { user: {} }},
   
     methods: {
    handleRegister() {
        this.registration();
      });
    },

    registration() {
        User.register(this.user);
    }
  },
   
}
</script>

routes.js導入組件沒問題。 我這里也導入了Vue和VueRouter 。

const routes = [
    //
];

const router = new VueRouter({
    routes
})


export default router

這里有什么問題？？ router在main.js中工作

在這一行給我錯誤：

self.$router.push({name:'Index'})

Answer 1

Vue-Router不能在像User.js這樣的自定義 js 文件中工作

在 Vue 組件中使用它。 喜歡：

注冊.vue

<template>
  <div class="col-md-12">
    <div class="card card-container">
      
      <form name="form" @submit.prevent="handleRegister">
       ----
      </form>
   
  </div>
</template>
<script>
export default {
   data() { return { user: {} }},
   
     methods: {
    handleRegister() {
        this.registration();
      });
    },

    registration() {
        User.register(this.user);
        this.$router.push({ name: 'Index'});
    }
  },
   
}
</script>

Answer 2

另一個答案是正確的，但是注冊失敗的情況是什么：所以嘗試添加一個回調作為參數，然后在里面調用它：

class User {
    register(data,cb) {
        let uri = 'http://localhost:8000/api/auth/register';
        let self = this;
        Axios.post(uri, data).then((res) => {
            cb()
        }).catch( (error) => {
            console.log(error);
        });
    }
}

   registration() {
        User.register(this.user, ()=>{this.$router.push({ name: 'Index'});});
        
    }