个人中心
gpt4 book ai didi

vuejs2 - vuejs vue-路由器 : TypeError: Cannot read property 'push' of undefined

转载 作者：行者123 更新时间：2023-12-05 03:02:19 25 4
gpt4 key购买 nike

<分区>

我在使用 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) 并且无法呈现指定的路由？

25 4 0
文章推荐： wagtail - 鹡鸰图像的替代文字
文章推荐： azure - 使用 Azure 设备预配服务的 REST API 注册设备？
文章推荐： firebase - 有没有办法使用 Firebase 收集用户电子邮件？
文章推荐： amazon-web-services - aws-cli 中的运行实例和创建实例有什么区别？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com