3

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?

0

1 Answer 1

5

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!

Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.