vuejs vue-router：TypeError：无法读取未定义的属性“推送”[重复]

Posted 2023-02-22

【中文标题】vuejs vue-router：TypeError：无法读取未定义的属性“推送”[重复]

【英文标题】：vuejs vue-router: TypeError: Cannot read property 'push' of undefined [duplicate]

【发布时间】：2019-07-22 21:48:22

【问题描述】：

我在使用 vue-router 加载页面时遇到问题。看来我的$router var 没有被访问。

当我控制台日志this.$router 我收到一个未定义的。但是，控制台日志记录 this 在开发工具中返回存储对象。

以下是相关脚本：

ma​​in.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 模块）

-有问题的动作被命名为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;

为什么我无法访问 vue-router 变量 ($router/this.$router) 并且无法呈现指定的路由？

【参考方案1】：

@yuriy636 链接中的内容以及帖子中的其他链接帮助我解决了！

我最终做了以下事情：

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

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

非常感谢@yuriy636！