1.想实现当网址输入页面路由不存在时，页面跳转到404页面
解决方法：只要在路由配置下增加如下代码即可
{
path: '*',
name: 'error404',
component: resolve => require(['components/error-page/404'], resolve)
},
{
path: '/500',
name: 'error500',
component: () => import('components/error-page/500')
}
输入一个不存在的路由，页面显示如下
image.png
2.如果想在请求后端接口时，根据http不同状态码404/500，渲染不同的页面404/500
解决方法是在对应在main.js使用了axios的拦截器,但一般情况下，页面要请求多个接口，这样做并没有实际效果
import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
import router from './router'
import App from './App'
Vue.use(Vuex);
axios.withCredentials=true;
axios.response.use(response => {
console.log(response)
return response;
}, error => {
//console.log(error)
//console.log(error.response)
//方式一通过返回的error.response
//很奇怪这里的error.response并没有值，所以我换了另一种方式实现
// if (error && error.response) {
// switch (error.response.status) {
// case 404:
// router.push({name:'error404'});
// break;
// case 500:
// router.push({ name:'error500'});
// break;
// default: error.message = `出错了(${error.response.status})!`;
// }
// }
//方式二
const errMsg = error.toString()
const code = errMsg.substr(errMsg.indexOf('code') + 5)
switch (code) {
case '404':
router.push({name:'error404'});
break;
case '500':
router.push({ name:'error500'});
break;
default: error.message = `出错了(${error.response.status})!`;
}
return Promise.reject(error);
});
//日志打开
Vue.config.productionTip = true
//
router.beforeEach((to,from,next)=>{
window.document.title=to.meta.title;
next();
});
router.afterEach((to,form,next)=>{window.scrollTo(0,0)});
new Vue({
el: '#app',
router,
components: { App },
template: ''
})
接口返回500时页面变成了如下
image.png
image.png
在单独的axios文件里打印出来的error.response如下图,始终不知道main.js为啥不返回，百度答案有说是因为浏览器不返回
image.png
