本文共 1038 字，大约阅读时间需要 3 分钟。

一.接口请求配置

1.main.js中的配置

import axios from 'axios'              //导入axios包axios.defaults.baseURL   =  'http://127.0.0.1:8888'  //配置根路径vue.prototype.$http = axios            //这样配置过后，每一个组件都可通过$http对接口发起请求

2.对应组件中的调用

通过this.$http.post('请求地址', {'请求参数'})调用返回值可以为res,可直接把res赋值给其他变量const { data ：res} = await this.$http.post("login", this.loginForm)console.log(data)

二.导入element组件

1.main.js中的配置

//导入全部的组件import ElementUI from 'element-ui'Vue.use(ElementUI)//导入对应的组件import { Button } from 'element-ui'Vue.use(Button)//全局挂载对应的组件,可以通过this.$message全局调用import { Message } from 'element-ui'Vue.prototype.$message = Message

2.对应组件中的调用

this.$message.error("登录失败");

三.登录后token的保存

window.sessionStotage.setItem("token", res.data.token);    //保存tokenwindow.sessionStotage.clear();         //清除token

四.页面的跳转

1.main.js中的配置

import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)const router = new Router({	routes:[	{ path: '/', redirect: 'login'},	{ path: '/login', component: Login }	]})export default router

2.对应组件中的调用

this.$router.push('/home')

转载地址：http://qkjmf.baihongyu.com/