1：添加路由规则
路由规则在router/index.js 中编写；在入口文件main.js中导入router文件，当我们需要为项目编写路由规则时，就需要在router/index.js 中编写。
import Vue from ‘vue’
import Router from ‘vue-router’
Vue.use(Router)
import Layout from ‘@/layout’
/**
* constantRoutes
* 公共路由 默认路由
*
*/
export const constantRoutes = [
{
path: ‘/login’,
component: () => import(‘@/views/login/index’),
hidden: true
},
{
path: ‘/404’,
component: () => import(‘@/views/error-page/404’),
hidden: true
}
]
const createRouter = () => new Router({
mode: ‘history’, // 默认路由模式 hash或者history模式
scrollBehavior: () => ({ y: 0 }),
routes: constantRoutes
})
const router = createRouter()
export function resetRouter() {
const newRouter = createRouter()
router.matcher = newRouter.matcher
}
export default router
2：添加要跳转的路径
在添加路由规则时，通过component属性可以设置要跳转的路径，并且需要在对应的路径上创建对应的文件。
如 ：component: () => import(‘@/views/error-page/404’)(注：404是.vue文件)
3：定义接口路径
在页面中引入api下的js文件，该文件中定义了接口路径的一部分。
接口路径的另一部分是 config/dev.env.js 中的BASE_API属性，BASE_API与url共同构成了项目页面的访问路径。
import request from ‘@/utils/request’
export function selBzchByFile(query) {
return request({
url: ‘/user/userinfo’,
method: ‘post’,
data: query
})
}
4：使用axios进行接口调用
使用axios进行接口调用，把接口返回数据在页面
axios({
method: ‘post’,
url: ‘http://test.cn/pel/expInfo’, // 请求地址
data: this.listQuery, // 参数
responseType: ‘blob’, // 表明返回服务器返回的数据类型
headers: {
‘token-auth’ : getToken(),
‘Content-Type’: ‘application/json’
}
}).then(res => {
const link = document.createElement(“a”);
let blob = new Blob([res.data], { type: “application/vnd.ms-excel” });
link.style.display = “none”;
link.href = URL.createObjectURL(blob);
link.setAttribute(“download”, decodeURI(res.headers[‘filename’]));
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
setTimeout(() => {
this.listLoading = false
}, 1.5 * 1000)
}).catch(err => {
console.log(err)
});