Vue学习总结4-axios与Vue-router

Vue学习总结4-axios与Vue-router

axios
Axios 是一个开源的可以用在浏览器端和 NodeJS 的异步通信框架，主要作用就是实现 AJAX 异步通信,Vue.js 是一个视图层框架 所以 Vue.js 并不包含AJAX 的通信功能，为了解决通信问题，作者单独开发了一个名为 vue-resource 的插件，不过在进入 2.0 版本以后停止了对该插件的维护并推荐了 Axios 框架
axios的安装与使用(基于webpack-simple 模板)

npm install --save axios vue-axios #安装axios也可使用cnpm加速度

在main.js中引入axios

/**引入axios请求 */
import axios from 'axios'
import VueAxios from 'vue-axios'
/**使用axios请求 */
Vue.use(VueAxios, axios)

发送axios请求(axios请求可以出现在Vue对象的声明周期函数，methods,计算属性computed等位置，通过axios请求来实现为Vue中data属性中的元素赋值)

this.axios({
     method:'get',  /**请求方式 */
     url:'http://bit.ly/2mTM3nY', /**url */
     data:{} /**请求参数 */
   })
   .then(function (response) { /**响应成功 */
       console.log(response.data)
    }
    );

解决axios无法传递data中的参数问题
原因：

Content-Type:application/json;charset=UTF-8

Content-Type:application/x-www-form-urlencoded

用axios的qs内置库中的方法进行内容类型的转换

import Qs from 'qs'
this.axios({
  method:'post',
  url:'http://localhost:8081/regist',
  transformRequest: [
  function (data) { return Qs.stringify(data) }],
  data:{email:this.email }}
  . then(function (response) {
      alert(response.data.message)
  }

vue-router
vue-router是Vue的一个插件包。路由器在数据通信中帮我们实现选择通信线路的功能。Vue-route同样实现的功能是通过vue-route实现Vue组件视图之间的跳转展现。
安装路由模块

npm install vue-router --save-dev #可替换为cnpm加速

创建Vue组件(基于webpack-simple模板)
新建view目录存放Vue组件如图

链接式路由实现(1.编写组件页面)
home.vue

user.vue

nav.vue

创建路由表(在src目录下行进routes.js)
routes.js

import Home from './view/home.vue'
import User from './view/user.vue'
/**导入路由映射关系*/
export const routes = [
    { path: '/home', component: Home },
    { path: '/user', component: User }
]

修改main.js(全局引入模块)

import Vue from 'vue'
import App from './App.vue'
/**引入axios请求 */
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)
    /**引入路由模块 */
import VueRouter from 'vue-router'
/**引入静态路由表 */
import { routes } from './routes'
Vue.use(VueRouter); //3.使用路由模块 
//4.创建一个VueRouter模块的实例 
const router = new VueRouter({ routes: routes })

new Vue({
    el: '#app',
    router, //5.把router实例放入到vue实例中
    render: h => h(App)
})

修改App.vue

npm run dev 运行效果如下

程序式路由(由用户页面回到首页)
修改user.vue

运行效果

路由参数传递
修改nav.vue

修改routes.js

import Home from './view/home.vue'
import User from './view/user.vue'
export const routes = [
    { path: '/home', component: Home },
    /**转发参数*/
    { path: '/user/:id', component: User }
]

修改user.vue

结果

总结：通过axios和vue-router能实现页面的异步请求数据和组价页面之间的跳转展示，也是我们搭建Vue应用必不可少的两个核心模块。到目前Vue的核心基础已经搞定，可以配合UI库实现搭建自己的vue应用。