最近一直在忙著做項目，也漸漸開始有些疲倦了，感覺如果一直做一些重復(fù)的事情，還真的是很容易厭倦的，所以也是時候停下來，總結(jié)一下自己這段時間遇到的一些小問題以及一些小感悟吧。項目中用到的是vue，但其實說實話，對于其背后的核心以及真正的理念，自己還不是很清楚，就先通過做項目，了解一些基本的信息吧，再去慢慢體會，歡迎一起來交流呀。
接下來就算是總結(jié)一下自己這段時間遇到的一些問題吧，同時補充一些基礎(chǔ)知識點。
--------------------------------------------- 我是華麗的分割線 -------------------------------------------------------
- 路由基礎(chǔ)知識
$router: router實例，可以實現(xiàn)編程式導(dǎo)航，導(dǎo)航到不同的url。
基本的幾種跳轉(zhuǎn)方法：
router.push(location):用戶點擊返回會回到之前的url
router.replace(location): 不會向history中添加新的記錄，會替換當(dāng)前的history記錄
router.go(n): 類似window.history.go 會記錄向前或者向后多少步
// 字符串
router.push('home')
// 對象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})
// 帶查詢參數(shù)，變成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
// 帶命名參數(shù)，變成導(dǎo)航到 /user/123 路徑
router.push({ name: 'user', params: { userId: 123 }})
$route: 當(dāng)前激活的路由對象，這個屬性是只讀的，可以通過watch來檢測它。
當(dāng)前的路由信息對象，有很多屬性
$route.path: 當(dāng)前路由的路徑，'/foo/bar'
$route.params： 當(dāng)前路由的參數(shù)，可以根據(jù)該參數(shù)進行不同用戶的id的獲取
$route.query： 當(dāng)前路由的URL的請求參數(shù)，對于 /foo?user=1，則有 $route.query.user == 1
$route.hash： 當(dāng)前路由的 hash 值 (帶 #) ，如果沒有 hash 值，則為空字符串。
$route.name： 當(dāng)前路由的名字。
上面是vue中路由的一些基本的信息
實際項目中的應(yīng)用與例子：
vue 實現(xiàn)分頁顯示和數(shù)據(jù)請求，路由更新。
在項目中需要實現(xiàn)表格的一個分頁顯示，那向后臺獲取數(shù)據(jù)的時候也需要帶上頁碼的數(shù)據(jù)參數(shù)，當(dāng)然，為了請求參數(shù)之后，路由的數(shù)據(jù)也跟著跳轉(zhuǎn)改變，除此之外，直接在地址欄輸入地址，也可以直接根據(jù)請求參數(shù)，向后臺獲取相應(yīng)頁面的數(shù)據(jù)。那么我是在項目中做了這樣的操作。
1 綁定頁面切換事件，獲取當(dāng)前頁碼，更改當(dāng)前的路由地址。
2 監(jiān)聽路由變化，根據(jù)路由變化，獲取參數(shù)，向后臺請求某頁的數(shù)據(jù)。
3 目的，路由變化，數(shù)據(jù)請求變化。頁面切換，路由變化，數(shù)據(jù)也跟著變化。
當(dāng)獲取的是表格中第一頁的數(shù)據(jù)，路由地址是：http://localhost:8998/#/cashierPage?page=1
當(dāng)獲取的是表格中第二頁的數(shù)據(jù)，路由地址是：http://localhost:8998/#/cashierPage?page=2
因為現(xiàn)在是前后端分離，所以只能前端來手動修改路由地址。
先看具體的實現(xiàn)吧，項目中是用了element組件的page控件。
首先，element中的分頁組件的引用，具體使用可以先看一下官方文檔：
http://element.eleme.io/#/zh-CN/component/pagination
template中的模塊
<el-pagination
@current-change="handleCurrentChange"
:current-page="page.cur"
:page-size="10"
layout="total, prev, pager, next"
:total="20 * page.totalPage">
</el-pagination>
其中，根據(jù)官網(wǎng)來，current-change是當(dāng)前顯示的頁面，
而@current-change事件是在current-page改變的時候會請求。
所以在main.js中，handleCurrentChange的處理就是
handleCurrentChange (val) {
this.$route.query.page = val // 其中val是當(dāng)前的頁數(shù)。
this.$router.replace(route) // 這樣頁面就跳轉(zhuǎn)到相應(yīng)的路由了。
此時的路由地址是：
}
當(dāng)然，僅僅這樣改變路由還是不夠的，還需要根據(jù)此時的路由的參數(shù)page參數(shù)，去向后臺請求數(shù)據(jù)。我的做法就是監(jiān)聽路由變化。
watch: {
// 監(jiān)聽路由變化，隨時獲取新的列表信息
'$route': 'fetchData'
}
那么如何獲取數(shù)據(jù)就根據(jù)你后臺的接口地址來獲取了
// 獲取路由信息，得到當(dāng)前的頁數(shù)。
fetchData () {
this.loading = true
this.page.cur = +this.$route.query.page || 1 // 這個就是當(dāng)前要請求的頁數(shù)
this.getList() // 向后臺發(fā)數(shù)據(jù)請求的接口，我分來來寫了。
}
// 這個就根據(jù)后臺接口自己去寫請求方法了。
getList () {
api.getBookList({
page: this.page.cur,
reservationname: this.guestName,
reservationphone: this.phoneNum
})
.then((data) => {
this.loading = false
// 轉(zhuǎn)化數(shù)據(jù)
this.resolveData(data.data.orders)
// 賦值總頁數(shù)
this.page.totalPage = data.data.count
})
.catch((err) => {
console.log(err)
})
}
當(dāng)點擊第一個之后。路由跟著變化，點擊第一頁的時候，路由是
而此時的實現(xiàn)是：
2 數(shù)據(jù)獲取
https://router.vuejs.org/zh-cn/advanced/data-fetching.html
在路由跳轉(zhuǎn)的時候，相應(yīng)的頁面也會跟著渲染，那么，官方文檔提出了兩種解決的方法。
導(dǎo)航完成之后獲取：先完成導(dǎo)航，然后在接下來的組件生命周期鉤子中獲取數(shù)據(jù)。在數(shù)據(jù)獲取期間顯示『加載中』之類的指示。
導(dǎo)航完成之前獲?。簩?dǎo)航完成前，在路由的 enter 鉤子中獲取數(shù)據(jù)，在數(shù)據(jù)獲取成功后執(zhí)行導(dǎo)航。
從技術(shù)角度講，兩種方式都不錯 —— 就看你想要的用戶體驗是哪種。
而我更傾向于導(dǎo)航完成后去請求數(shù)據(jù)，這樣會比較方便簡單吧。
頁面第一次初始化的時候，就去請求數(shù)據(jù)。
created () {
// 組件創(chuàng)建完后獲取數(shù)據(jù)，
// 此時 data 已經(jīng)被 observed 了
this.fetchData()
},
watch: {
// 如果路由有變化，會再次執(zhí)行該方法
'$route': 'fetchData' // 只有這個頁面初始化之后，這個監(jiān)聽事件才開始生效
},
總結(jié)：
根據(jù)當(dāng)前的路由參數(shù)，去向后臺發(fā)起相關(guān)的數(shù)據(jù)請求；自己在實際項目中還有一個應(yīng)用就是，需要向后臺請求不同的報表數(shù)據(jù)，這些報表的名字都不一樣，所以點擊按鈕之后，就設(shè)置當(dāng)前的路由參數(shù)，再根據(jù)當(dāng)前的路由參數(shù)去獲取相關(guān)的數(shù)據(jù)，進行頁面的渲染。
