一贼穆、vue-router 路由基本加載
路由，通俗地來講就是輸入不同的網(wǎng)址坯临，加載不同的組件焊唬。
- 進(jìn)入項(xiàng)目目錄
cd my-project
- 安裝
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: rt,
components: { App },
template: '<App/>'
})
- 確定視圖加載的位置
<router-view></router-view>
二看靠、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>
三赶促、vue-router 路由參數(shù)的傳遞
- 必須在路由中加入路由的
name屬性- 必須在
path后加/: + 傳遞的參數(shù)- 傳遞參數(shù)和接收參數(shù)見下方代碼
1. 配置路由
export default new router({ // 導(dǎo)出路由
routes: [{
name: 'helloworld',
path: '/helloworld/:worldmsg', // 指定要跳轉(zhuǎn)的路徑
component: HelloWorld // 指定要跳轉(zhuǎn)的組件
}, {
name: 'helloearth',
path: '/helloearth/:earthmsg',
component: HelloEarth
}]
})
2. 傳遞和讀取參數(shù)（兩種方法）
- 方法一
- 傳遞參數(shù)：
<router-link :to="{name:'helloworld', params:{worldmsg:'你好世界'}}">
HELLO WORLD
</router-link>
<router-link :to="{name:'helloearth', params:{earthmsg:'你好地球'}}">
HELLO EARTH
</router-link>
- 讀取（接收）參數(shù)：
$route.params.xxx
要往哪個(gè)組件跳轉(zhuǎn)挟炬，就由哪個(gè)組件來接收鸥滨。
我是傳遞過來的參數(shù)：<h3>{{$route.params.worldmsg}}</h3>
- 方法二（不常用）
- 傳遞參數(shù)：
<router-link :to="{path:'/helloearth', query:{worldmsg:'你好世界'}}">
HELLO WORLD
</router-link>
- 讀取（接收）參數(shù)：函數(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 })
}]
})
- 兩種傳遞方式的區(qū)別：
- params 傳遞方式：
http://localhost:8080/helloworld/你好世界 - query 傳遞方式：
http://localhost:8080/helloworld?name=xx&count=xxx
四粥喜、Axios 詳解
1. Axios 簡(jiǎn)介
axios 是一個(gè)基于 Promise 用于瀏覽器和 node.js 的 HTTP 客戶端凸主，它的功能與 ajax 相似，其本身具有以下特征：
- 在瀏覽器中創(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
2. Axios 之 get 請(qǐng)求詳解
- 安裝
npm install axios
- 在文件中引入加載
import axios from 'axios'
- 將 axios 全局掛載到 VUE 原型上
Vue.prototype.$http = axios // $ 后面的內(nèi)容自定義
- 發(fā)送請(qǐng)求
- 以 CNode 社區(qū)官方 API 為例：
getData(){
this.$http.get('https://cnodejs.org/api/v1/topics')
.then((res) => {
this.items = res.data.data
console.log(res)
})
.catch(function(err){
console.log(err)
})
}
- GET 請(qǐng)求的兩種參數(shù)傳遞形式：
axios.get('https://cnodejs.org/api/v1/topics', {
params: { // 只有一個(gè)參數(shù)時(shí)可省略params直接寫參數(shù)
page: 1,
limit: 10
}
})
axios.get('https://cnodejs.org/api/v1/topics?page=1&limit=15')
3. Axios 之 post 請(qǐng)求詳解
POST 請(qǐng)求和 GET 類似额湘，將請(qǐng)求中的 get 替換成 post 即可秕铛。
- POST 請(qǐng)求傳遞數(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方法缩挑。
- 使用步驟：
安裝 qs 插件：npm install qs
在文件中引入：import qs from 'qs'
在 post 請(qǐng)求中使用：qs.stringify({ page: 1, limit: 10 })
- 以 CNode 社區(qū)官方 API 為例：
postData(){
this.$http.get(url, qs.stringify({
page: 1,
limit: 10
})).then((res) => {
this.items = res.data.data
console.log(res)
})
.catch(function(err){
console.log(err)
})
}
五但两、Vuex 之 store
Vuex 是用來管理狀態(tài)，共享數(shù)據(jù)供置，在各個(gè)組件之間管理外部狀態(tài)的一個(gè)插件谨湘。例如用戶的已登錄狀態(tài)，需要在各個(gè)組件之前進(jìn)行交互芥丧。Vuex 首先會(huì)創(chuàng)建一個(gè)狀態(tài)倉(cāng)庫(kù)紧阔，并將所有組件囊括其中，即這個(gè)倉(cāng)庫(kù)下的所有組件都可以共享倉(cāng)庫(kù)里的狀態(tài)续担。
- 使用步驟：
1. 安裝 vuex：npm install vuex
2. 在 main.js 文件中引入并通過use方法使用 vuex：
import Vuex from 'vuex'擅耽，Vue.use(Vuex)
3. 創(chuàng)建狀態(tài)倉(cāng)庫(kù)
4. 將store注入到 Vue 實(shí)例
5. 通過this.$store.state.xxx拿到需要的數(shù)據(jù)
// 創(chuàng)建狀態(tài)倉(cāng)庫(kù)（此處名稱store可自定義）
var store = new Vuex.Store({
state:{
xxx：yyy
}
})
六、Vuex 的相關(guān)操作
1. 改變狀態(tài)
除了能夠獲取狀態(tài)物遇，那么如何改變狀態(tài)呢乖仇？
我們用 state 存放定義的狀態(tài)憾儒，用 mutations 來改變狀態(tài)。
-
mutations用法
// 創(chuàng)建狀態(tài)倉(cāng)庫(kù)
var store = new Vuex.Store({
state: {
num: 88
},
mutations: {
// 定義狀態(tài)改變函數(shù)
zzz: function(state){
state.num++
}
}
})
// 調(diào)用方式
this.$store.commit('zzz') // zzz 是在 mucations 中定義的方法名
-
actions用法：
var store = new Vuex.Store({
state: {
num: 88
},
mutations: {
zzz: function(state){
state.num++
}
},
actions:{
// actions 中只能對(duì) mutation 進(jìn)行操作
ccc: function(context){ // context是上下文對(duì)象
context.commit('zzz')
}
}
})
// 調(diào)用方式
this.$store.dispatch('ccc')
注意：
actions 提交的是 mutation乃沙，而不是直接變更狀態(tài)起趾。
actions 可以包含異步操作，但是 mutation 只能包含同步操作警儒。
-
getters用法：
var store = new Vuex.Store({
state: {
num: 88
},
mutations: {
zzz: function(state){
state.num++
}
},
getters: {
getNum: function(state){
return state.num>0 ? state.num : 0
}
}
})
// 調(diào)用方式
this.$store.getters.getNum
2. vuex 狀態(tài)管理流程
vuex 狀態(tài)管理流程為：
view ——> actions ——> mutations ——> state ——> view
- 從視圖出發(fā)训裆，先是 actions，然后是 mutations蜀铲，然后通過 mutations 來操作 state边琉，最后再回到 view。
- 直接對(duì)狀態(tài)進(jìn)行操作的是 mutations记劝，不是 actions艺骂。
- 在這個(gè)過程中，actions 不是必須存在的隆夯，但如果有異步操作钳恕，則必須包含 actions。
