<分区>
我在使用 vue-router 加载页面时遇到问题。看来我的 $router var 没有被访问。
当我控制台记录 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) 并且无法呈现指定的路由？