IT이야기

store.js 디스패치 기능에서 작동하지 않는 Vue-router 리디렉션

cyworld 2022. 3. 26. 16:14
반응형

store.js 디스패치 기능에서 작동하지 않는 Vue-router 리디렉션

내 store.js 파일 메소드에서 vue-router를 사용하여 로그인을 수행한 후 사용자를 리디렉션하려고 하지만 어떤 이유로든 이전 페이지로 다시 보내기만 하면 된다.만약 내가 나의 .vue 페이지에 vue-router를 사용한다면 그것은 잘 작동한다.

내가 뭘 잘못하고 있는 거지?

여기 내 경로야.js 파일

import Vue from 'vue'
import VueRouter  from 'vue-router'
import login from '@/views/login'
import page2 from '@/views/page2 '

Vue.use(VueRouter)

export default new VueRouter({
  routes: [
    {
        path: '/',
        name: 'login',
        component: login
    },
    {
      path: '/page2 ',
      name: 'page2 ',
      component: page2 
  }
  ]
})

여기 내 store.js 파일이다.

import Vue from 'vue'
import Vuex from 'vuex'
import axios from '@/axios.js'
import router from '@/routes';

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    token: ''
  },
  mutations: {
    login (state, payload){
      return state.token = payload;
    }
  },
  actions: {
    login ({ commit }, payload) {
      axios.get('/login',{
        auth: {
          username: payload.username,
          password: payload.password
        }
      }).then(function (response) {
        commit('login', response.data['user-token'])
        router.go('page2')
      })
    }
  }
  })

  export default store;

router.go(n)기록 스택에서 탐색하는 데 사용됨: https://router.vuejs.org/guide/essentials/navigation.html#router-go-n

사용하다router.push({name: "page2"})대신에

참조URL: https://stackoverflow.com/questions/60892345/vue-router-redirecting-not-working-on-store-js-dispatch-function

반응형