一饱溢、路由簡(jiǎn)單四步走
通俗地說：路由是輸入不同網(wǎng)址打開，顯示不同內(nèi)容 （即不同網(wǎng)址就是不同的路由）
專業(yè)地說：訪問不同的路由走芋，加載不同的組件
1?安裝
npm install --save vue-router // 一定要在項(xiàng)目文件夾下安裝
2?引用
import router from 'vue-router' //在入口文件main.js中引入绩郎，也可以是哪個(gè)文件用到，哪個(gè)文件引入
Vue.use(router)
此處一坑：router的引用翁逞，切記不能用npm 安裝自帶的 import router from './router'肋杖，會(huì)報(bào)錯(cuò)
要換成 import router from 'vue-router' 即可
3?配置路由文件，并在 vue 實(shí)例中注入
var rt = new router({//配置路由
routes:[{
path:'/', //指定要跳轉(zhuǎn)的路徑
components:HelloWorld //指定要跳轉(zhuǎn)的組件
}]
})
new Vue({//在 vue 實(shí)例中注入
el: '#app',
router:router,
components: {App},
template: '<App/>'
})
4?確定視圖要加載的位置
<router-view></router-view> // 定義的是path對(duì)應(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前面 切記加冒號(hào)（:）
4?接收參數(shù)（往哪個(gè)組件跳轉(zhuǎn)，就是哪個(gè)組件接收）
$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請(qǐng)求
1?axios定義
一個(gè)基于Promise 用于瀏覽器和nodejs 的 HTTP 客戶端 ,它本身具有以下特征：
a津畸、從瀏覽器中創(chuàng)建 XMLHttpRequest
b、從nodejs 發(fā)出 http 請(qǐng)求
c必怜、支持Promise API
d肉拓、攔截請(qǐng)求和響應(yīng)
e、轉(zhuǎn)換請(qǐng)求和響應(yīng)數(shù)據(jù)
f梳庆、取消請(qǐng)求
g暖途、自動(dòng)轉(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ā)出請(qǐng)求芋浮，以cnode社區(qū)API 為例
// 為給定的id 的 user 創(chuàng)建請(qǐng)求
getData(){//使用傳統(tǒng)的function
var self = this
this.$http.get('https://cnodejs.org/api/v1/topics')
.then(function(res){//此處的this 指向的不是當(dāng)前vue 實(shí)例
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') //請(qǐng)求
.then(res =>{
self.items = res.data.data
console.log(res.data.data)
})
.catch(err =>{
console.log(err)
})
}
小總結(jié)：Get 請(qǐng)求有三種方式：
a、沒參數(shù)時(shí)，直接通過url
axios.get('https://cnodejs.org/api/v1/topics')
b纸巷、有參數(shù)時(shí)镇草，兩種傳遞參數(shù)形式
axios.get('https://cnodejs.org/api/v1/topics', {
params: {//params 里面可以接多個(gè)對(duì)象
id: 12345
}
})
//當(dāng)前頁碼是第一頁，且每頁顯示15
axios.get('https://cnodejs.org/api/v1/topics?page=1&limit=15', {
id: 12345 //如果只有一個(gè)params,沒有其他參數(shù)瘤旨，可以這么簡(jiǎn)寫
})
五梯啤、Axios中的post請(qǐng)求
postData(){ //在axios中，post請(qǐng)求接收的參數(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指向的不是當(dāng)前vue實(shí)例
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請(qǐng)求接收的參數(shù)必須是form-data 察滑，此時(shí)用到qs插件中的qs.stringify轉(zhuǎn)換即可
