javascript - How to navigate using vue router from Vuex actions - Stack Overflow

admin管理员组

文章数量:1134592

I am creating a web app with Vue 2.x and Vuex 2.x. I am fetching some information from a remote location via an http call, I want that if that call fails I should redirect to some other page.

GET_PETS: (state) => {
  return $http.get('pets/').then((response)=>{
      statemit('SET_PETS', response.data)
    })
  },
  error => {this.$router.push({path:"/"}) }
  )
}

But this.$router.push({path:"/"}) gives me following error.

Uncaught (in promise) TypeError: Cannot read property 'push' of undefined

How can this be achieved.

Simulated JsFiddle: here

I am creating a web app with Vue 2.x and Vuex 2.x. I am fetching some information from a remote location via an http call, I want that if that call fails I should redirect to some other page.

GET_PETS: (state) => {
  return $http.get('pets/').then((response)=>{
      state.commit('SET_PETS', response.data)
    })
  },
  error => {this.$router.push({path:"/"}) }
  )
}

But this.$router.push({path:"/"}) gives me following error.

Uncaught (in promise) TypeError: Cannot read property 'push' of undefined

How can this be achieved.

Simulated JsFiddle: here

• javascript
• vue.js
• vuex

Share Improve this question Follow edited Nov 23, 2016 at 16:54 Saurabh asked Nov 22, 2016 at 8:16 SaurabhSaurabh 73.6k4343 gold badges189189 silver badges251251 bronze badges 1

• it is because you are using it inside an arrow function that treats 'this' as a literal. either convert it to a regular function or use the suggested answers below... – EldadT Commented Sep 11, 2017 at 20:56

Add a comment  | 

6 Answers 6

Sorted by: Reset to default 230

As long as you're exporting your router instance from somewhere in your app (e.g. ./router.js), you can import it for use anywhere you want– including into Vuex stores:

import router from './router';

From there, you can use router.push().

Simple like that.

This example may help you.

main.js

import Vue from "vue";
import VueRouter from "vue-router";

...

Vue.use(VueRouter);

export const router = new VueRouter({
    mode: 'hash',
    base: "./",
    routes: [
        { path: "/", component: welcome},
        { path: "/welcome", component: welcome},

    ]
})

actions.js

import {router} from "../main.js"

export const someAction = ({commit}) => {

    router.push("/welcome");
} 

INITIAL ANSWER

In main.js (the one, where we "install" all modules and create Vue instance, i.e. src/main.js):

const vm = new Vue({
  el: '#app',
  router,
  store,
  apolloProvider,
  components: { App },
  template: '<App/>'
})

export { vm }

This is my example, but in our case the most important here is const vm and router

In your store:

import { vm } from '@/main'

yourMutation (state, someRouteName) {
  vm.$router.push({name: someRouteName})
}

P.S. Using import { vm } from '@/main' we can access anything we need in Vuex, for example vm.$root which is needed by some components of bootstrap-vue.

P.P.S. It seems we can use vm just when everything is loaded. In other words we can not use vm inside someMutation in case, if we call someMutation inside mounted(), because mounted() comes/occurs before vm is created.

---

NEW ANSWER

Constantin's answer (the accepted one) is better than mine, so just want to show for novice how to implement it.

Inside core dir (inside /src in my case), next to App.vue, main.js and others I have router.js with the content:

import Vue from 'vue'
import Router from 'vue-router'

// Traditional loading
import Home from '@/components/pages/Home/TheHome'

// Lazy loading (lazy-loaded when the route is visited)
const Page404 = () => import(/* webpackChunkName: "Page404" */ '@/components/pages/404)
const Page503 = () => import(/* webpackChunkName: "Page503" */ '@/components/pages/503)

Vue.use(Router)

const router = new Router({
  mode: 'hash',
  base: process.env.BASE_URL,
  linkExactActiveClass: 'active',
  routes: [
    {
      path: '*',
      name: 'Page404',
      component: Page404
    },

    {
      path: '*',
      name: 'Page503',
      component: Page503
    },

    {
      path: '/',
      name: 'Home',
      component: Home
    },

    // Other routes
    {....},
    {....}
  ]
})

// Global place, if you need do anything before you enter to a new route.
router.beforeEach(async (to, from, next) => {
  next()
})

export default router

Import our router to main.js:

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

const vm = new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

export { vm }

Finally, inside your component, or Vuex or anywhere else import router from './router' and do whatever you need, such as router.push(...)

It looks like you aren't injecting your router into your app, hence it being 'undefined'

In previous versions of vue-router you would: Vue.use(VueRouter), with 2.0 you can inject the router into the app like below:

const routes = [
  { path: '/foo', component: Foo },
]

const router = new VueRouter({
  routes
})

const app = new Vue({
  router // inject the router
}).$mount('#app')

this should then make it available as this.$router throughout the app

---

Following answering a related question: How to use Vue Router from Vuex state? it seems that Vuex won't receive the router instance at this.$router. Therefore two methods were suggested to provide access to the router instance.

The first is more direct which involves setting a webpack global to the instance.

The second involves using Promises with your vuex action that would allow your components to utilise their reference to the router instance following the actions Promise resolving / rejecting.

I didn't like keeping my app's location state separate from the rest of my app state in the Store, and having to manage both a Router and a Store, so I created a Vuex module that manages the location state inside the Store.

Now I can navigate by dispatching actions, just like any other state change:

dispatch("router/push", {path: "/error"})

This has the added benefit of making things like animated page transitions easier to handle.

It's not hard to roll your own router module, but you can also try mine if you want to:

https://github.com/geekytime/vuex-router

You can simply import route from router directory like this:

import router from '@/router'

router.push({name: 'Home'})

this @ symbol replaces the path to the src directory

本文标签： javascriptHow to navigate using vue router from Vuex actionsStack Overflow