配置安装模块如下
npm i vue-router@3
![](https://i-blog.csdnimg.cn/blog_migrate/75a63dd23b2a53639c117fd9ef3ca3cc.png)
配置main.js文件
import Vue from 'vue'
import App from './App.vue'
import router from "@/router";
import ElementUI from 'element-ui'//导入element-ui
import 'element-ui/lib/theme-chalk/index.css'//导入element-ui的样式文件
import * as echarts from 'echarts'//导入echarts
Vue.prototype.$echarts = echarts//将echarts添加到Vue的原型上
Vue.use(ElementUI)
new Vue({
router,
render: function (h) { return h(App) },
}).$mount('#app')
对axios进行二次封装,配置请求拦截器和响应拦截器
import axios from "axios";
//1.配置基础路径
const axiosInstance = axios.create({
baseURL:'http://localhost:8089',
timeout:5000
})
//2.定义请求拦截器:给所有请求都带上token
axiosInstance.interceptors.request.use((req)=>{
let token = sessionStorage.getItem('Auth')//获取页面存储中的token信息
if(token){//若token存在
req.headers['Auth'] = token
}
return req;
},(err)=>{//出现错误
return Promise.reject(err)
})
//3.响应拦截器,对服务器响应给客户端的数据进行统一的处理
// axiosInstance.interceptors.response.use((res)=>{
// //1.对响应数据进行处理
// let data = res.data
// let code = data.code
// if(code == 200){
// return data
// }else {
// return Promise.reject(data)
// }
//
// },(arr)=>{
// return Promise.reject(arr)
// })
export default axiosInstance
配置router文件夹的index.js文件,路由文件
//路由文件
import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter)
//创建路由器对象
const router = new VueRouter({
//路由表
routes:[
{
path:'/book',
name:'book',
component:()=>import('../components/Books')
}
],
mode:'history'
})
export default router
app.vue组件
<template>
<div id="app">
<Container></Container>
</div>
</template>
<script>
import Container from "@/components/Container";
export default {
name: 'App',
components:{
Container,
},
data(){
return{
bookList:[]
}
},
}
</script>
<style>
*{
margin: 0;
padding: 0;
}
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
</style>
Container组件,应用element-ui的布局
<template>
<div>
<el-container>
<el-header height="80px">
<el-row>
<el-col :span="3">
<el-image
style="width: 200px; height: 80px;"
:src="url"
:fit="fit">
</el-image>
</el-col>
</el-row>
</el-header>
<el-container>