一、路由簡單四步走

通俗地說：路由是輸入不同網(wǎng)址打開，顯示不同內(nèi)容 （即不同網(wǎng)址就是不同的路由）
專業(yè)地說：訪問不同的路由，加載不同的組件

1?安裝

npm install --save vue-router // 一定要在項目文件夾下安裝

2?引用

import router from 'vue-router' //在入口文件main.js中引入，也可以是哪個文件用到，哪個文件引入
Vue.use(router)

此處一坑：router的引用，切記不能用npm 安裝自帶的 import router from './router'，會報錯

image.png

要換成 import router from 'vue-router' 即可

3?配置路由文件，并在 vue 實例中注入

var rt = new router({//配置路由
    routes:[{
        path:'/', //指定要跳轉(zhuǎn)的路徑
        components:HelloWorld //指定要跳轉(zhuǎn)的組件
    }]
})

new Vue({//在 vue 實例中注入
    el: '#app',
    router:router,
    components: {App},
    template: '<App/>'
})

4?確定視圖要加載的位置

<router-view></router-view> // 定義的是path對應(yīng)的組件渲染的位置

二、路由的跳轉(zhuǎn)

<router-link to="/"></router-link>
<template>
    <ul>
        <li>
            <router-link to="/helloworld">HELLO WORLD</router-link>
        </li>
        <li>
            <router-link to="/helloearth">HELLO EARTH</router-link>
        </li>
    </ul>
</template>

三、vue-router路由參數(shù)的傳遞

1?必須在路由內(nèi)加入路由的name

2?必須在path后加上 /: 和 傳遞的參數(shù)

export default new Router({
  routes: [
    {
      path: '/helloworld/:worldmsg', //在path后加上  /: 和 傳遞的參數(shù)
      name: 'helloworld', //加入路由的name
      component: HelloWorld
    },
    {
      path: '/helloearth/:earthmsg',
      name: 'helloearth',
      component: HelloEarth
    }
  ]
})

3?傳遞參數(shù)

<router-link :to="{name: helloearth,params:{msg:'你我她'}}">Hello Earth</router-link>// to前面 切記加冒號（:）

4?接收參數(shù)（往哪個組件跳轉(zhuǎn)，就是哪個組件接收）

$route.params.msg // msg是要傳遞的參數(shù)
//形式：..../helloworld/你好世界 
    
<template>
  <div class="hello">
    <h1>Hello World</h1>
    <h2>Essential Links</h2>
    <h3>{{$route.params.msg}}</h3>
    <hr>
  </div>
</template>

四、Axios中的get請求

1?axios定義
一個基于Promise 用于瀏覽器和nodejs 的 HTTP 客戶端 ,它本身具有以下特征：

a、從瀏覽器中創(chuàng)建 XMLHttpRequest

b、從nodejs 發(fā)出 http 請求

c、支持Promise API

d、攔截請求和響應(yīng)

e、轉(zhuǎn)換請求和響應(yīng)數(shù)據(jù)

f、取消請求

g、自動轉(zhuǎn)換JSON數(shù)據(jù)

h、客戶端支持防止 CSRF/ XSRF

2?axios 四步走

a、安裝

npm install axios

b、引入加載

import axios from 'axios'

c、將axios 全局掛載到 VUE 原型上

Vue.prototype.$http= axios //$http名字隨意

d、發(fā)出請求，以cnode社區(qū)API 為例

// 為給定的id 的 user 創(chuàng)建請求

getData(){//使用傳統(tǒng)的function
    var self = this
    this.$http.get('https://cnodejs.org/api/v1/topics')
        .then(function(res){//此處的this 指向的不是當前vue 實例
            self.items = res.data.data
            console.log(res.data.data)
        })
        .catch(function(err){
            console.log(err)
        })
}


getData(){//使用es6
   this.$http.get('https://cnodejs.org/api/v1/topics') //請求
       .then(res =>{
            self.items = res.data.data
            console.log(res.data.data)           
       })
        .catch(err =>{
            console.log(err)
        })
}

小總結(jié)：Get 請求有三種方式：

a、沒參數(shù)時，直接通過url

axios.get('https://cnodejs.org/api/v1/topics')

b、有參數(shù)時，兩種傳遞參數(shù)形式

axios.get('https://cnodejs.org/api/v1/topics', {
    params: {//params 里面可以接多個對象
      id: 12345
    }
})
                                 //當前頁碼是第一頁，且每頁顯示15
axios.get('https://cnodejs.org/api/v1/topics?page=1&limit=15', {
   id: 12345  //如果只有一個params,沒有其他參數(shù)，可以這么簡寫
})

五、Axios中的post請求

postData(){ //在axios中，post請求接收的參數(shù)必須是form.data
   this.$http.post(url,qs.stringify({//所以這里用到 qs插件，用qs.stringify轉(zhuǎn)換即可
        page:1,
        limit:20
   })).then(res =>{
      this.items = res.data.data //此處this指向的不是當前vue實例
      console.log(res)
   })
   .catch(err =>{
        console.log(err)
   })
 }

小總結(jié)：POST傳遞數(shù)據(jù)有兩種格式：

a、form.data ?page=1&limit=48
b、x.www.form.urlencoded { page: 1,limit: 10 }

特別注意：
在axios中，post請求接收的參數(shù)必須是form-data ，此時用到qs插件中的qs.stringify轉(zhuǎn)換即可