在 Laravel/Vue.js 组件中使用 this.$router

Question

我在 Laravel 中有一个 Vue.js 组件，它正在加载：

Vue.component('user-profile', require('./components/UserProfile.vue').default);

但是，当我在其中使用 this.$router.go() 时，出现以下错误：

TypeError: 无法读取未定义的属性“$router”

所以，我已将此添加到我的routes：

const routes = [
    {
        path: '/profile',
        component: UserProfile
    },
    ...
];

然后，我明白了：

未捕获的引用错误：未定义用户配置文件

所以，我换了：

Vue.component('user-profile', require('./components/UserProfile.vue').default);

作者：

import UserProfile from './components/UserProfile.vue';

但我收到此错误：

未知的自定义元素： - 您是否注册了 组件正确吗？

我应该如何解决这个问题才能在我的组件中使用this.$router.go()？

=== 编辑 ===

我在这里使用this.$router.go()：

  methods: {
    async update () {
      await axios.put(`/api/user/` + this.data.id, this.user)
        .then(function (response) {
          console.log(response);
          this.$router.go()
        })
        .catch(function (error) {
          console.log(error);
        });
    }
  },

Answer 1

要么使用箭头函数

methods: {
    async update () {
      await axios.put(`/api/user/` + this.data.id, this.user)
        .then((response) => { // check here
          console.log(response);
          this.$router.go()
        })
        .catch((error) => {
          console.log(error);
        });
    }
  },

或使用var vm = this;

 methods: {
    async update () {
      var vm = this;// check here
      await axios.put(`/api/user/` + this.data.id, this.user)
        .then(function (response) {
          console.log(response);
          vm.$router.go(); // check here
        })
        .catch(function (error) {
          console.log(error);
        });
    }
  },

Read about arrow function