Requirement: when responding to an error, the rendering will display the interface with error information
preparation: create error information interfaces 400. Vue and 500. Vue in content
note: pay attention to the level of routing where the error interface needs to be placed (I’m under children)

1、 Create route (routes/index. JS)

	export default {
    mode: 'history',
    routes: [
        // Dynamic path parameters Start with a colon
        {
            name:'index',
            path: '/',
            component: () => import('@/components/QBLayout/index.vue'),
            children: [
            	{
	                name:'index',
	                path: '/',
	                component: () => import('@/components/Index/index.vue'),
           	 	},
            	{
                    name: 'error_403',
                    path: '403',
                    component:()=>import('@/components/errorStatus/403.vue')
                },
                {
                    name: 'error_500',
                    path: '500',
                    component:()=>import('@/components/errorStatus/500.vue')
                },
                {
                    name: 'error_404',//Note that this 404 route should be placed at the end
                    path: '*',
                    component:()=>import('@/components/errorStatus/404.vue')
                }
            ]
        }
    ]
}

	

2、 Response interception (util/HTTP. JS)

import Axios from 'axios'

//1.Wrapping method: for exception response codes are handled separately
const codeErrorHandle = (resData)=>{
    switch (resData.code) {
        case 404:
            router.push({
                name:'error_404'
              })
            break;
        case 500:
            router.push({
                name:'error_500'
              })
            break;
        default:
}
//2, axios interception
const instance = Axios.create({ timeout: 25000 });

//3, response interception: mainly for response processing as follows
instance.interceptors.response.use(
    res => {
        if (res.status && +res.status < 300 && res.data && +res.data.code === 1) 
            return Promise.resolve(res.data.data);
        } else {//Call codeErrorHandle to handle exception response codes
            codeErrorHandle(res.data);
            return Promise.reject(res);
        }
    },
    error => {//This is other response state judgement, not this topic, so omit it here for now}
);

Effect interface

http://localhost : 8080/test. (enter the interface not in the route, for example: test, and then press enter to display the 404 interface)