How to use $router.push in Vue-router?

Question

i need to use $router.push in Vue-router. Check my code:

axios.interceptors.response.use(function (response) {
    return response
  }, function (error) {
    if(error && error.message === 'Network Error'){
        //here is problem. I can;t use this.$router in js file? How to fix this?
        this.$router.push('calendar')
    }
    return Promise.reject(error)
  })

My question is how do I use $router.push in this file? Check my router:

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import axios from 'axios'
Vue.use(VueRouter);

axios.interceptors.response.use(function(response) {
  return response
}, function(error) {
  if (error && error.message === 'Network Error') {
    Vue.push('home')
  }
  return Promise.reject(error)
})

const routes = [{
  path: '/',
  name: 'home',
  component: Home
}, {
  other routes
}]

Dan · Accepted Answer · 2020-04-07 00:59:01Z

3

You can do this with route navigation guards.

Here's a contrived example using beforeEach (runs before every route):

router.beforeEach(async (to, from, next) => {
  const response = await axios.get(...);
  if (response.data.isGood) {
    next();
  } else {
    next({ name: 'home' });
  }
});

This would run an async call before navigating to each route, and then check the response data. If everything is good, the navigation proceeds. Otherwise, the user is redirected back to the home route.

You can do this for individual routes with beforeEnter:

{
    path: '/',
    name: 'home',
    component: Home,
    async beforeEnter(to, from, next) {
      // same axios call & next usage as above example
    }
}

edited Apr 7, 2020 at 0:59

answered Apr 7, 2020 at 0:49

Dan

63.5k18 gold badges113 silver badges122 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dan Over a year ago

Did this answer solve your problem? Please checkmark this answer and this will help other people as well. You can do so like this. Or let me know if anything is unclear.

Collectives™ on Stack Overflow

How to use $router.push in Vue-router?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related