vue-router: 路由
如果在一個(gè)模塊化工程中使用它，必須要通過(guò) Vue.use() 明確地安裝路由功能：
在你的文件夾下的 src 文件夾下的 main.js 文件內(nèi)寫(xiě)入以下代碼
動(dòng)態(tài)路由匹配
我們經(jīng)常需要把某種模式匹配到的所有路由，全都映射到同個(gè)組件。例如，我們有一個(gè) User 組件，對(duì)于所有 ID
各不相同的用戶，都要使用這個(gè)組件來(lái)渲染。那么，我們可以在 vue-router 的路由路徑中使用『動(dòng)態(tài)路徑參數(shù)』（dynamic
segment）來(lái)達(dá)到這個(gè)效果：
{path:"/two:id",component:{template:"#b"},},
當(dāng)我們?cè)诘刂泛竺嬷苯犹砑尤我庾址?我們會(huì)發(fā)現(xiàn)文檔內(nèi)容隨著我們的更改而改變.
嵌套路由
我們經(jīng)常將動(dòng)態(tài)路由和嵌套路由共同使用,嵌套路由即是在原路由的基礎(chǔ)上增加一個(gè) children ,children 是一個(gè)數(shù)組.并且我們還需要在原來(lái)的組件上添加< router-view >來(lái)渲染 chlidren 里面的路由.
第二個(gè)router
user:{{ $route.params.id }}
編程式導(dǎo)航
除了使用 <router-link> 創(chuàng)建 a 標(biāo)簽來(lái)定義導(dǎo)航鏈接，我們還可以借助 router 的實(shí)例方法，通過(guò)編寫(xiě)代碼來(lái)實(shí)現(xiàn)。
router.push(location)
想要導(dǎo)航到不同的 URL，則使用 router.push 方法。這個(gè)方法會(huì)向 history 棧添加一個(gè)新的記錄，所以，當(dāng)用戶點(diǎn)擊瀏覽器后退按鈕時(shí)，則回到之前的 URL。
當(dāng)你點(diǎn)擊 <router-link> 時(shí)，這個(gè)方法會(huì)在內(nèi)部調(diào)用，所以說(shuō)，點(diǎn)擊 <router-link :to="..."> 等同于調(diào)用 router.push(...)。
該方法的參數(shù)可以是一個(gè)字符串路徑，或者一個(gè)描述地址的對(duì)象。
axios
通用的 ajax 請(qǐng)求庫(kù), 官方推薦, vue2.x 使用廣泛
// 引入模塊
import axios from 'axios'
// 發(fā)送 ajax 請(qǐng)求
axios.get(url)
.then(response => {
console.log(response.data) // 得到返回結(jié)果數(shù)據(jù)
})
.catch(error => {
console.log(error.message)
})
vuex 是什么簡(jiǎn)單來(lái)說(shuō): 對(duì) vue 應(yīng)用中多個(gè)組件的共享狀態(tài)進(jìn)行集中式的管理(讀/寫(xiě))
狀態(tài)自管理應(yīng)用
1）state: 驅(qū)動(dòng)應(yīng)用的數(shù)據(jù)源
2）view: 以聲明方式將 state 映射到視圖
3）actions: 響應(yīng)在 view 上的用戶輸入導(dǎo)致的狀態(tài)變化(包含 n 個(gè)更新?tīng)顟B(tài)的方法)
vuex 核心概念和 API
?state
1）vuex 管理的狀態(tài)對(duì)象
2）它應(yīng)該是唯一的
const state = {
xxx: initValue
}
?mutations
1）包含多個(gè)直接更新 state 的方法(回調(diào)函數(shù))的對(duì)象
2）誰(shuí)來(lái)觸發(fā): action 中的 commit('mutation 名稱')
3）只能包含同步的代碼, 不能寫(xiě)異步代碼
const mutations = {
yyy (state, {data1}) {
// 更新 state 的某個(gè)屬性
}
}
?actions
1）包含多個(gè)事件回調(diào)函數(shù)的對(duì)象
2）通過(guò)執(zhí)行: commit()來(lái)觸發(fā) mutation 的調(diào)用, 間接更新 state
3）誰(shuí)來(lái)觸發(fā): 組件中: $store.dispatch('action 名稱', data1) // 'zzz'
4）可以包含異步代碼(定時(shí)器, ajax)
const actions = {
zzz ({commit, state}, data1) {
commit('yyy', {data1})
}
}
?getters
1）包含多個(gè)計(jì)算屬性(get)的對(duì)象
2）誰(shuí)來(lái)讀取: 組件中: $store.getters.xxx
const getters = {
mmm (state) {
return ...
}
}
?modules
1）包含多個(gè) module
2）一個(gè) module 是一個(gè) store 的配置對(duì)象
3）與一個(gè)組件(包含有共享數(shù)據(jù))對(duì)應(yīng)
?向外暴露 store 對(duì)象
export default new Vuex.Store({
state,
mutations,
actions,
getters
})
?組件中
import {mapState, mapGetters, mapActions} from 'vuex'
export default {
computed: {
...mapState(['xxx']),
...mapGetters(['mmm']),
}
methods: mapActions(['zzz'])
}
{{xxx}} {{mmm}} @click="zzz(data)"
?映射 store
import store from './store'
new Vue({
store
})
?store 對(duì)象
1）所有用 vuex 管理的組件中都多了一個(gè)屬性$store, 它就是一個(gè) store 對(duì)象
2）屬性:
state: 注冊(cè)的 state 對(duì)象
getters: 注冊(cè)的 getters 對(duì)象
3）方法:
dispatch(actionName, data): 分發(fā)調(diào)用 action
