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')

User.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 在自定义 js 文件中不起作用，例如 User.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'});});
        
    }

“类型错误：无法读取未定义的属性‘推送’”Vuejs

2 个答案: