Question

我无法通过vue-router加载页面。似乎没有达到我的$router变量。

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

以下是相关脚本：

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模块）

-该操作的名称为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）并且无法呈现指定的路由？

Answer 1

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

我最终做了以下事情：

await

这将暂时起作用，直到我发现比在每个vuex模块中添加导入更好的方法为止。

非常感谢@ yuriy636！

vuejs vue-router：TypeError：无法读取未定义的属性“ push”

1 个答案: