[英]How to use $router.push in Vue-router?
我需要在 Vue-router 中使用$router.push
。 检查我的代码:
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)
})
我的问题是如何在这个文件中使用$router.push
? 检查我的路由器:
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
}]
您可以使用路线导航守卫来做到这一点。
这是一个使用beforeEach
的人为示例(在每条路线之前运行):
router.beforeEach(async (to, from, next) => {
const response = await axios.get(...);
if (response.data.isGood) {
next();
} else {
next({ name: 'home' });
}
});
这将在导航到每个路由之前运行一个异步调用,然后检查响应数据。 如果一切正常,导航将继续。 否则,用户将被重定向回主路由。
您可以使用beforeEnter
对单个路由执行此操作:
{
path: '/',
name: 'home',
component: Home,
async beforeEnter(to, from, next) {
// same axios call & next usage as above example
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.