前端學習之路：第二章、Vue-router和axios

第二章、Vue-router和axios

Vue項目的核心功能就是Vue-router和axios，Vue-router是路由工具，用來在不同頁面間跳轉，而axios是ajax請求工具，用來向服務器發送ajax請求。

1. Vue-router

現代的前端頁面能提供一個App所能提供的所有功能，所以這就是WebApp的由來，而Vue構建的項目正是為了開發WebApp。

開發WebApp的比較流行的一種方式叫做單頁應用，就是說用戶訪問網頁時只加載了一個html頁面，但是通過js的控制，可以讓頁面顯示不同的內容，這樣比較好的模擬了原生App的效果。

那么回到Vue-router上，這個工具正是為了實現單頁應用而誕生的。

上圖就是路由的配置代碼，這段代碼表示訪問/路徑時會渲染HelloWorld組件。

而HelloWorld組件出現的位置，就在上圖中<router-view/>所在的位置。

2. axios

axios是官方推薦的ajax請求工具，因為vue-cli創建的項目中沒有包含這個工具，所以需要手動安裝一次，輸入命令

npm install axios -save

-save表示要將某個包安裝到依賴庫里，這樣在打包時，webpack就會自動把這個包的代碼一起打包到最終的js文件里。

在src目錄下新建一個api.js的文件，輸入以下代碼

import axios from 'axios';
import qs from 'qs';

axios.defaults.timeout = 5000;
axios.defaults.baseURL = process.env.API_URL;

axios.interceptors.request.use(
  config => {
    config.headers = {
      'Content-Type': 'application/x-www-form-urlencoded'
    };
    if (config.method == 'post') {
      config.data = qs.stringify(config.data)
    }
    return config;
  },
  err => {
    return Promise.reject(err);
  }
);

export default axios;

然后在main.js文件里加入以下代碼

import api from './api.js'
global.api = api

將axios賦值給全局變量api，這樣在任何頁面上都可以直接通過api.get或api.post這樣的方式來實現ajax請求。