vue项目路由404设置与请求404/500设置

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