Vue入門教程 第六篇 （路由、axios）

路由

Vue.js 路由需要載入 vue-router 庫。

npm安裝：

 npm install vue-router 

使用范例：

// router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/pages/login'
import Home from '@/pages/home'

Vue.use(Router)
const router = new Router({
  routes: [
    {
      path: '/',
      name: 'login',
      component: Login
    },
    {
      path: '/home',
      name: 'home',
      component: Home,
      meta: {//meta是拓展，默認為空
        privilegeLevel: 1//自定義字段，此處用來表示訪問的權限級別
      }
    }
  ]
})

export default router;

其中，path是url路徑，name是路由名稱，component是組件，meta是拓展屬性，可以自定義。

 

拓展知識

router為VueRouter的實例，相當於一個全局的路由器對象，利用它我們可以實現頁面跳轉。

不帶參數

this.$router.push('/home')
this.$router.push({name:'home'})
this.$router.push({path:'/home'})

query傳參

this.$router.push({name:'home',query: {id:'1'}})
this.$router.push({path:'/home',query: {id:'1'}})
// html 取參 $ route.query.id
// script 取參 this.$ route.query.id

params傳參

this.$ router.push({name:'home',params: {id:'1'}}) // 只能用 name

// 路由配置 path: "/home/:id" 或者 path: "/home:id" ,

// 不配置path ,第一次可請求,刷新頁面id會消失

// 配置path,刷新頁面id會保留

// html 取參 $ route.params.id

// script 取參 this.$ route.params.id

query和params區別：

query類似 get, 跳轉之后頁面 url后面會拼接參數,類似?id=1, 非重要性的可以這樣傳, 密碼之類還是用params刷新頁面id還在

params類似 post, 跳轉之后頁面 url后面不會拼接參數 , 但是刷新頁面id 會消失。

 

axios（ajax）

Axios 是一個基於 Promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。axios作用與ajax一致，但是實用性更強。

npm安裝：
 npm install axios 

Get

axios
 .get('https://127.0.0.1/user',
 {
  params: {//參數
          userId:1,
          password:123345
          }
 })
 .then(response => {
 //response是返回結果
 })
 .catch(function (error) { // 請求失敗
   console.log(error);
 });

Post

axios
 .post('https://127.0.0.1/user',
 {//參數
  userId:1,
  password:123345
 })
 .then(response => {
 //response是返回結果
 })
 .catch(function (error) { // 請求失敗
   console.log(error);
 });

所有請求方式：

• axios.request(config)
• axios.get(url[, config])
• axios.post(url[, data[, config]])
• axios.delete(url[, config])
• axios.head(url[, config])
• axios.put(url[, data[, config]])
• axios.patch(url[, data[, config]])

響應結果(response對象)：

axios.get("/user")
  .then(function(response) {
    console.log(response.data);//由服務器提供的響應
    console.log(response.status);//HTTP 狀態碼
    console.log(response.statusText);//來自服務器響應的 HTTP 狀態信息
    console.log(response.headers);//服務器響應的頭
    console.log(response.config);//為請求提供的配置信息
  });

axios默認值

當我們需要大量使用axios的時候，如果每次都要書寫冗余的配置將會耗費時間且不易管理，axios允許設置默認配置，可以在調用時不再逐一設置。
全局：

//默認訪問的后端服務器url
axios.defaults.baseURL = 'http://127.0.0.1:3000/';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
//post的默認數據類型
axios.defaults.headers.post['Content-Type'] = 'application/json';

自定義（使用新實例覆蓋全局設置）：

// 創建實例時設置配置的默認值
var instance = axios.create({
baseURL: 'http://127.0.0.1:3001/'
});
instance.defaults.timeout = 2500;
instance.get('/longRequest', {
timeout: 5000// 為已知需要花費很長時間的請求覆寫超時設置
});