vue.js - VueJs:不能使用 router.push
问题描述
所以,我想在我的 store.js 上 vue router.push,但我不断收到错误Cannot read property 'push' of undefined
我试图在我的 store.js 中导入 vue-router,但仍然是徒劳的
这是我的 app.js :
import Vue from 'vue'
import VueRouter from 'vue-router'
//Import and install the VueRouter plugin with Vue.use()
Vue.use(VueRouter)
import App from './views/App'
import Home from './views/Home'
import Login from './views/Login.vue'
import Register from './views/Register.vue'
const router = new VueRouter({
mode: 'history',
routes: [{
path: '/',
name: 'home',
component: Home,
meta: { requiresAuth: true }
},
{
path: '/login',
name: 'login',
component: Login
},
{
path: '/register',
name: 'register',
component: Register
},
],
});
const app = new Vue({
el: '#app',
components: { App },
router,
});
这是我的 store.js :
import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
Vue.use(Vuex);
export default new Vuex.Store({
state: {
accessToken: null,
loggingIn: false,
loginError: null
},
mutations: {
loginStart: state => state.loggingIn = true,
loginStop: (state, errorMessage) => {
state.loggingIn = false;
state.loginError = errorMessage;
},
updateAccessToken: (state, accessToken) => {
state.accessToken = accessToken;
},
logout: (state) => {
state.accessToken = null;
}
},
actions: {
doLogin({ commit }, loginData) {
commit('loginStart');
console.log(loginData)
axios.post('http://localhost:8000/api/login', loginData)
.then(response => {
console.log(response)
let accessToken = response.data.jwt;
document.cookie = 'jwt_access_token=' + accessToken;
commit('updateAccessToken', accessToken);
///this caused the error
this.$router.push({ path: '/' })
})
.catch(error => {
// commit('loginStop', error.response.data.error);
console.log(error)
commit('updateAccessToken', null);
console.log(error.response);
})
}
}
})
如您所见,在我调用 doLogin() 函数并使用 axios 后,它停在 this.$router.push({ path: '/' }) 行,导致错误。
解决方案
你需要做一个router.js
文件
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const router = new Router({
...
})
export default router
app.js
将 vue-router 的导入替换为 new和router.js
remove Vue.use(Router)
。
在 store 中,this
不是 Vue 实例。导入router.js
你的store.js
;
import router from './router'
然后你可以像这样访问它;
router.push({ path: '/' })
我还注意到您没有将商店添加到 Vue 实例中。导入并添加app.js
.
import store from './store'
...
const app = new Vue({
el: '#app',
components: { App },
router,
store //<<<<<<<<
});
推荐阅读
- node.js - Dialogflow Fulfillment Webhook - 请求有效负载始终为空
- kubernetes - 确定哪个 GKE 节点正在处理客户端请求
- javascript - 如果只选择一个选项,如何在 Node 后端处理 HTML `select` 多个值
- opengl - 默认摄像头在哪里?
- javascript - 不能在模块外使用 import 语句 - React Native
- flutter - 如何在 Flutter(`beacon_broadcast` 库)中发现错误?常规方法不适用于此库
- java - 在 Java 中将十六进制字节数组的字符串表示形式转换为具有非 ascii 字符的字符串
- neural-network - 关于反向传播的说明
- c++ - 带有可变参数展开错误的崩溃转储和 SEH
- node.js - 在 Angular+NodeJS 程序中编写注册方法的问题