1,配置element-plus
vite.config.js添加
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// plugins里面添加plus
plugins: [
vue(),
Components({
resolvers: [ElementPlusResolver]
})
],
2,请求拦截request.js
import axios from 'axios'
import {getToken} from '../utils/auth'
const service = axios.create({
baseURL:'xxxx'
})
// 请求拦截器
service.interceptors.request.use(config => {
// 给header添加后台返回的token 用作身份识别
config.headers['token'] = getToken();
return config
})
//响应拦截器
service.interceptors.response.use(res => {
return res
},err => {
return Promise.reject(err)
})
export default service
3,请求调用 api.js
import axios from '../utils/request'
export function login(data){
return axios({
method:'post',
url:'',
data
})
}
4,路由拦截
import { createRouter, createWebHashHistory } from 'vue-router'
import { getNavData } from '../api/api'
import { mainStore } from '../store/index'
const routes = [
{
path: '/home',
name: 'home',
component: () => import('../***')
}
]
const router = createRouter({
history: createWebHashHistory(),
routes
})
// 路由拦截
router.beforeEach(async (to, from, next) => {
if(to.path == '/login'){
next();
}else{
if(mainStore() && mainStore().nav.length == 0){
// 1 数据交互
const res = await getNavData();
// 2 缓存 pinia
mainStore().setNav(res.data.res)
// 3 将服务器端返回的数据格式转换为路由配置数据格式
const routerData = changeRouterData(res.data.res)
router.addRoute(routerData)
next({path: to.path})
}else{
next()
}
}
})
function changeRouterData(data){
// 找到home配置
let homeRoutes = routes.filter(v => v.path == '/home')[0]
homeRoutes.children = []
data.forEach(item => {
homeRoutes.children.push({
path: item.path,
name: item.name,
component: () => import(``)
})
})
return homeRoutes
}
export default router
5,缓存pinia main.js
// 相当于vuex 多了持续存储
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
import {createPinia} from 'pinia'
const pinia = createPinia();
createApp(App).use(router).use(pinia).mount('#app')