12.vue实战--接口请求,组件使用,页面跳转配置

一.接口请求配置

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);    //保存token
window.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')