title: vuejs vue-router: TypeError: Cannot read property 'push' of undefined
body: <p>I am having trouble loading a page with vue-router. It appears that my <code>$router</code> var isn't being reached. </p>
  
  <p>When I console log <code>this.$router</code> I receive an undefined. However, console logging <code>this</code> returns the store object in dev tools. </p>
  
  <p>Here are the relevant scripts:</p>
  
  <p><strong>main.js</strong></p>
  
  <pre><code>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 =&gt; h(App)
  }).$mount("#app");
  </code></pre>
  
  <p><strong>router.js</strong></p>
  
  <pre><code>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: () =&gt;
          import(/* webpackChunkName: "about" */ "./views/About.vue")
      }
    ]
  });
  </code></pre>
  
  <p><strong>userSession.js (vuex module)</strong></p>
  
  <p>-The action in question is named <code>authenticateUserSession</code> </p>
  
  <pre><code>import Axios from "axios";
  
  const userSession = {
    namespaced: true,
    state: {
      email: '',
      password: ''
    },
    mutations: {
      SET_EMAIL: (state, payload) =&gt; {
        state.email = payload;
      },
      SET_PASSWORD: (state, payload) =&gt; {
        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) =&gt; {
          // 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) =&gt; {
        return state.email;
      },
      getPassword: (state) =&gt; {
        return state.password;
      }
    }
  }
  export default userSession;
  </code></pre>
  
  <p>Why am I missing access to the vue-router variable (<code>$router/this.$router</code>) &amp; unable to render a specified route?</p>