11.1 vue-router路由基本加載
簡單四步走
- 安裝
npm install --save vue-router
- 引用
import router from 'vue-router'
Vue.use(router)
- 配置路由文件，并在vue實(shí)例中注入
var rt = new router({
routes:[{
path:'/',//指定要跳轉(zhuǎn)的路徑
component: HelloWorld//指定要跳轉(zhuǎn)的組件
}]
})
new Vue({
el: '#app',
router:router,
components: { App },
template: '<App/>'
})
- 確定視圖加載的位置
<router-view></router-view>
11.2 vue -router路由的跳轉(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>
11.3 vue -router路由參數(shù)的傳遞
1.必須在路由內(nèi)加入路由的name
2.必須在path后加/: +傳遞的參數(shù)
- 傳遞參數(shù)和接收參數(shù)看下邊代碼
<router-link :to="{name: helloearth,params:{msg: 只有一個(gè)地球}}">
HELLO WORLD
</router-link>
讀取參數(shù)： $route.params.XXX
方式：===/helloworld/你好世界
<router-link :to="{path: '/helloearth',query:{msg: 只有一個(gè)地球}}">
HELLO WORLD
</router-link>
方式：===/helloworld?name=XX&count=xxx
函數(shù)模式
你可以創(chuàng)建一個(gè)函數(shù)返回 props。這樣你便可以將參數(shù)轉(zhuǎn)換成另一種類型，將靜態(tài)值與基于路由的值結(jié)合等等。
const router = new VueRouter({
routes: [
{ path: '/search', component: SearchUser, props: (route) => ({
query: route.query.q }) }
]
})
11.3.1 Axios之get請(qǐng)求詳解
axios的簡介：
axios 是一個(gè)基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端，它本身具有以下特征：
- 從瀏覽器中創(chuàng)建 XMLHttpRequest
- 從 node.js 發(fā)出 http 請(qǐng)求
- 支持 Promise API
- 攔截請(qǐng)求和響應(yīng)
- 轉(zhuǎn)換請(qǐng)求和響應(yīng)數(shù)據(jù)
- 取消請(qǐng)求
- 自動(dòng)轉(zhuǎn)換JSON數(shù)據(jù)
- 客戶端支持防止 CSRF/XSRF
- 安裝
npm install axios
- 引入加載
import axios from 'axios'
- 將axios全局掛載到VUE原型上
Vue.prototype.$http = axios;
- 發(fā)出請(qǐng)求 以cnode社區(qū)API為例子
// 為給定 ID 的 user 創(chuàng)建請(qǐng)求
使用傳統(tǒng)的function
getData(){
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)
})
}
// 可選地，上面的請(qǐng)求可以這樣做
兩種傳遞參數(shù)的形式
axios.get('/user', {
params: {
ID: 12345
}
})
axios.get('/user', {
ID: 12345
})
---------------------------------
axios.get('https://cnodejs.org/api/v1/topics?page=1&limit=15')
使用CNODE社區(qū)官方的API為例展開學(xué)習(xí)
獲取主題列表API：https://cnodejs.org/api/v1/topics
參數(shù)：page頁碼
limit 每頁顯示的數(shù)量
11.3.1 Axios之post請(qǐng)求詳解
// 為給定 ID 的 user 創(chuàng)建請(qǐng)求
使用傳統(tǒng)的function
getData(){
var self = this;
this.$http.post(url,{
page:1,
limit:10
})
.then(function (res) {
//此處的this指向的不是當(dāng)前vue實(shí)例
self.items = res.data.data
console.log(res.data.data)
.catch(function (err) {
console.log(err)
})
}
POST傳遞數(shù)據(jù)有兩種格式：
- form-data ?page=1&limit=48
- x-www-form-urlencoded { page: 1,limit: 10 }
在axios中，post請(qǐng)求接收的參數(shù)必須是form-data
qs插件—-qs.stringify
11.4 Vuex之store
用來管理狀態(tài)，共享數(shù)據(jù)，在各個(gè)組件之間管理外部狀態(tài)
如何使用？
第一步：引入vuex，并通過use方法使用它
第二步： 創(chuàng)建狀態(tài)倉庫
第三步：通過this.$sore.state.XXX直接拿到需要的數(shù)據(jù)
//創(chuàng)建狀態(tài)倉庫，注意Store,state不能改
var store = new Vuex.Store({
state:{
XXX：xxx
}
})
//直接通過this.$sore.state.XXX拿到全局狀態(tài)
11.5 Vuex的相關(guān)操作
vuex狀態(tài)管理的流程
view———->actions———–>mutations—–>state————->view
除了能夠獲取狀態(tài)如何改變狀態(tài)呢？
//創(chuàng)建狀態(tài)倉庫，注意Store,state不能改
var store = new Vuex.Store({
state:{
XXX：xxx
},
mutations:{
}
})
調(diào)用： this.$store.commit(XXX);
此處的XXX是你在mucations中定義的方法名
var store = new Vuex.Store({
state:{
XXX：xxx
},
mucations:{
a:function(state){
}
},
actions:{
b:function(context){
context.commit('a');
}
}
})
調(diào)用： this.$store.dispatch(XXX);
getters:{
}
調(diào)用： this.$store.getters.getCount
注意：actions提交的是mutation,而不是直接變更狀態(tài)
actions可以包含異步操作，但是mutation只能包含同步操作
