写法如下,在路由文件中加入router.forEach的方法router.forEach((to,form,next)=>{})
import Vue from 'vue'
import Router from 'vue-router'
import AddStudent from '@/components/AddStudent.vue'
import Success from '@/components/success.vue'
const path = require('./handleRouter.js')
const fs = require('fs')
// console.log(path)
fs.readFile(path + '/AddStudent.vue', function (err, data) {
if (err) {
return console.error(err)
}
console.log('异步读取: ' + data.toString())
console.log('data.toString()')
console.log(data)
})
// const path = require.context('../components', true, /\.vue$/)
// console.log(path)
Vue.use(Router)
console.log('AddStudent')
console.log(AddStudent)
const router = new Router({
// base: '/mp/',
routes: [
{
path: '/',
name: 'AddStudent',
component: AddStudent,
meta: {
auth: 'fuck'
}
},
{
path: '/login',
name: 'Login',
component: () => import('@/components/login.vue')
},
{
path: '/success',
name: 'Success',
component: Success,
meta: {
auth: 'diu'
}
}
]
})
router.beforeEach((to, form, next) => {
if (to.meta.auth === 'fuck') {
next({
path: '/login'
})
} else {
next()
}
})
export default router
如上代码,可以判断meta元信息的auth的值是否是有权限之类的再进行跳转,可以控制页面流程
如下代码是根据请求修改的一些值
import axios from 'axios'
import { Notification } from 'element-ui'
// import qs from 'qs'
// 配置环境
// let baseUrl = 'http://127.0.0.1:8080'
// let baseUrlArr = [
// {
// type: 'development',
// url: 'http://127.0.0.1:8080'
// },
// {
// type: 'test',
// url: 'http://127.0.0.1:8080'
// },
// {
// type: 'production',
// url: 'http://127.0.0.1:8080'
// }
// ]
switch (process.env.NODE_ENV) {
case 'production':// 生产
axios.defaults.baseURL = 'http://xcx.gzfysyxx.com'
break
case 'test':// 测试
axios.defaults.baseURL = 'http://xcx.gzfysyxx.com'
break
default:// 开发
axios.defaults.baseURL = 'http://xcx.gzfysyxx.com'
}
axios.defaults.baseURL = 'http://kaizen.gz2vip.idcfengye.com'
// axios.defaults.baseURL = 'http://localhost:8080'
// axios.defaults.headers.commen['Authorization'] = '这是Token'
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
// 超时时间和跨域是否允许携带凭证和请求头
axios.defaults.timeout = 50000
axios.defaults.withCredentials = true
axios.defaults.headers['Content-Type'] = 'application/json'// 请求所传的数据是requestploy
// axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded'// 请求所传的数据是formdata
// axios.defaults.headers['Content-Type'] = 'application/json'
// 请求参数传递
// axios.defaults.transformRequest = data => qs.stringify(data)// 方式和get明文一致,但是已经经过编码,
// 拦截器 ,权限校验token,vuex->本地存储,发请求前
axios.interceptors.request.use(config => {
// 携带token
let token = localStorage.getItem('token')
token && (config.headers.Authorization = token)
let code = localStorage.getItem('code')
code && (config.headers.code = code)
return config
}, error => {
return Promise.reject(error)
})
// 响应拦截器
axios.interceptors.response.use(respose => {
// respose是一个对象有data,status,headers的返回
console.log('请求成功')
console.log(respose)
return respose.data// 能返回的是在调用之后处理
}, error => { // 不能返回的,就不能就在这里做处理
let { response } = error
let data = response.data
if (data) {
// => 服务器起码返回了结果
switch (data.status) { // 根据公司需要判断,一下可以跳页面,也可以弹消息
case 400:
Notification.error({
title: data.status,
message: data.message
})
break
case 401: // =>权限,可以判断是否登录
// ElementUI.$notify.error({
// title: '权限',
// message: '没有权限'
// })
break
case 403: // =>token过期(一般),拒绝请求
break
case 404: // =>找不到
break
}
return Promise.reject(error)
} else {
// => 服务器连结果都没有返回
if (!window.navigator.onLine) {
// 断网页面
return 0
}
return Promise.reject(error)
}
})
export default axios