vuejs vue-router: TypeError: Cannot read property 'push' of undefined

Question

I am having trouble loading a page with vue-router. It appears that my $router var isn't being reached.

When I console log this.$router I receive an undefined. However, console logging this returns the store object in dev tools.

Here are the relevant scripts:

main.js

import Vue from "vue";
import VueCookies from 'vue-cookies';
import App from "./App.vue";
import router from "./router";
import { store } from "./store/store";
import BootstrapVue from "bootstrap-vue";
import "./registerServiceWorker";
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue/dist/bootstrap-vue.css";
import "../css/bracket.min.css";

Vue.use(BootstrapVue);
Vue.use(VueCookies);

// set default config
VueCookies.config('1d');

// set global cookie
VueCookies.set('theme','default');
VueCookies.set('hover-time','1s');

require("../css/bracket.min.css");

Vue.config.productionTip = false;

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

router.js

import Vue from "vue";
import Router from "vue-router";
// import Home from "@/views/Home.vue";
import Splash from "@/components/Splash.vue";
import Dash from "@/components/Dash.vue";
import Signup from "@/views/Signup.vue";
import finalSignup from "@/components/finalSignup.vue";
import providerDash from "@/views/ProviderDash.vue";
import employeeDash from "@/views/EmployeeDash.vue";
import Login from "@/views/Login.vue";

Vue.use(Router);

export default new Router({
  mode: "history",
  base: process.env.BASE_URL,
  routes: [
    {
      path: "/",
      name: "home",
      component: Splash
    },
    {
      path: "/login",
      name: "login",
      component: Login
    },
    {
      path: "/signup",
      name: "signup",
      component: Signup
    },
    {
      path: "/provider-full-name",
      name: "finalSignup",
      component: finalSignup
    },
    {
      path: "/provider-dashboard",
      name: "providerDash",
      component: providerDash
    },
    {
      path: "/employee-dashboard",
      name: "employeeDash",
      component: employeeDash
    },
    {
      path: "/about",
      name: "about",
      component: () =>
        import(/* webpackChunkName: "about" */ "./views/About.vue")
    }
  ]
});

userSession.js (vuex module)

-The action in question is named authenticateUserSession

import Axios from "axios";

const userSession = {
  namespaced: true,
  state: {
    email: '',
    password: ''
  },
  mutations: {
    SET_EMAIL: (state, payload) => {
      state.email = payload;
    },
    SET_PASSWORD: (state, payload) => {
      state.password = payload;
    }
  },
  actions: {
    setEmail(context, email) {
      context.commit('SET_EMAIL', email)
    },
    setPassword(context, password) {
      context.commit('SET_PASSWORD', password)
    },
    authenticateUserSession(context, {email, password}) {
      context.dispatch('setEmail', email);
      context.dispatch('setPassword', password);
      Axios.post('http://localhost:3000/api/v1/sessions', {}, {
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json',
          'user-email': context.state.email,
          'user-password': context.state.password
        }
      })
      .then((response) => {
        // console.log(response.data.locals.token);
        // console.log(this.$router);
        // console.log(this);

        let jwt = response.data.locals.token
        window.$cookies.set('jwt', jwt);
        this.$router.push("home");
      })
      .catch(function(error) {
        console.log(error);
      })
    }
  },
  getters: {
    getEmail: (state) => {
      return state.email;
    },
    getPassword: (state) => {
      return state.password;
    }
  }
}
export default userSession;

Why am I missing access to the vue-router variable ($router/this.$router) & unable to render a specified route?

Answer 1

The content in @yuriy636's link in addition to the other links in the post helped me resolve!

I ended up doing the following:

import router from "../../router"; 
.
.
.

// inside the authenticateUserSession action, in axios response
router.push("home")";  

Many thanks @yuriy636!