未捕获的类型错误：无法读取未定义的属性“$router”答案

【问题标题】：Uncaught TypeError: Cannot read property '$router' of undefined未捕获的类型错误：无法读取未定义的属性“$router”
【发布时间】：2019-09-11 19:58:12
【问题描述】：

我正在开发一个基于 firebase 的 vue 应用程序，该应用程序应在成功登录后将用户重定向到主页。我收到 howewer Cannot read property '$router' of undefined error on the console 一旦单击登录。

我已经尝试从登录组件上的“./router”导入路由器，但没有成功。

main.js

import Vue from "vue";
import firebase from "firebase";
import App from "./App.vue";
import router from "./router";
import swalPlugin from './plugins/VueSweetalert2';

Vue.config.productionTip = false;

let app ='';

firebase.initializeApp( {
apiKey: "xx",
authDomain: "xx",
databaseURL: "xx",
projectId: "xx",
storageBucket: "xx",
messagingSenderId: "xx"
});

Vue.use(swalPlugin);

firebase.auth().onAuthStateChanged(() => {
  if (!app) {
    app = new Vue({
      router,
      render: h => h(App)
    }).$mount("#app");
  }
});

路由器.js

import firebase from 'firebase';
import Vue from "vue";
import Router from "vue-router";
import Home from "./views/Home.vue";
import Login from "./views/Login.vue";
import SignUp from "./views/SignUp.vue";

Vue.use(Router);

const router = new Router({
  routes: [
    {
      path: "*",
      redirect: "/login",
    },
    {
      path: "/",
      redirect: "/login",
    },
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
    {
      path: '/sign-up',
      name: 'SignUp',
      component: SignUp
    },
    {
      path: "/home",
      name: "Home",
      component: Home,
      meta: {
        requiresAuth: true
      }
    }
  ]
});

router.beforeEach ((to, from, next) => {
  const currentUser = firebase.auth.currentUser;
  const requiresAuth = to.matched.some (record => record.meta.requiresAuth);

  if (requiresAuth && !currentUser) next('login');
  else if (!requiresAuth && currentUser) next('home');
  else next();

});

export default router;

<template>
    <form autocomplete="off">
        <div class="login">
            <h1>Login</h1>
            <p>Sign in to stay updated with the latest news</p>
            <hr>

            <input type="text" placeholder="Email" v-model="email">

            <input type="password" placeholder="Enter Password" v-model="password">

            <hr>
            <button @click="login">Login</button>
            <p>Don't have an account yet? Create one <router-link to="/sign-up">here</router-link></p>

        </div>
    </form>
</template>


<script>
import firebase from 'firebase';
import Swal from 'sweetalert2';

export default {
    name: 'login',
    data() {
        return {
          email: '',
          password: ''
        }
    },
    methods: {
        login: function(){
            firebase.auth().signInWithEmailAndPassword(this.email, this.password).then(
              function (user) {
                this.$router.replace('home')
              },
              function (err) {
                Swal.fire({
                        type: 'error',
                        title: 'An error occurred...',
                        text: err.message
                })
              }
            );
        }
    }
}
</script>

【问题讨论】：

标签： vue.js vue-router

【解决方案1】：

我认为您使用 function 失去了作用域。

使用 es6 语法解决它（如果你负担得起/使用 babel），(user) => { .. }。

或者通过在主登录功能中设置var _this = this; 之类的内容并引用它。

【讨论】：

它也适用于 axios 响应拦截器。谢谢