1. 使用 Vue Router 的导航守卫
在router/index.js 文件中,可以添加全局的导航守卫来捕获错误并进行跳转。
import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/components/Home.vue';
import NotFound from '@/components/NotFound.vue';
Vue.use(Router);
const router = new Router({
routes: [
{ path: '/', component: Home },
{ path: '/404', component: NotFound },
{ path: '*', redirect: '/404' } // 捕获所有未匹配的路由
]
});
// 全局前置守卫
router.beforeEach((to, from, next) => {
// 这里可以添加逻辑来判断是否发生错误
const hasError = false; // 你可以根据实际情况设置这个值
if (hasError) {
next('/404'); // 跳转到 /404
} else {
next(); // 继续导航
}
});
export default router;
2. 在组件中捕获错误
如果在某个组件中发生了错误,可以使用 try-catch 语句捕获错误并进行路由跳转。
export default {
methods: {
async fetchData() {
try {
// 假设这是一个 API 请求
const response = await this.$http.get('/api/data');
// 处理响应
} catch (error) {
console.error('发生错误:', error);
this.$router.push('/404'); // 跳转到 /404
}
}
},
created() {
this.fetchData();
}
};
3. 使用 Vue 的错误处理
在 Vue 实例中使用 errorHandler 来捕获全局错误并进行处理:
Vue.config.errorHandler = (err, vm, info) => {
console.error(err);
// 跳转到404页面
vm.$router.push('/404');
};