vue 專案根據http狀態碼渲染404頁面,500頁面
阿新 • • 發佈:2018-11-29
最近做的vue專案中,前端需要根據http不同狀態碼,渲染不同的頁面。比如請求出錯404,伺服器內部錯誤500等。
我們需要做的是根據http返回的的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); Vue.prototype.$http = axios; Vue.prototype.$http.defaults.withCredentials=true; Vue.prototype.$http.interceptors.response.use(response => { console.log(response) if (response.data.resCode== "1000") { localStorage.clear(); alert(response.data.resMsg) router.push({ name:'login' }) } return response; }, error => { if (error && error.response) { switch (error.response.status) { case 404: router.push({name:'error-404'}); // error.message = '請求出錯(404)' break; case 500: router.push({ name:'error-500'}); // error.message = '伺服器錯誤(500)'; break; default: error.message = `連接出錯(${error.response.status})!`; } } return Promise.reject(error); }); /** * 日誌輸出開關 */ Vue.config.productionTip = true /* eslint-disable no-new */ 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: '<App/>' })