最近一直在忙著做項目摔癣，也漸漸開始有些疲倦了奴饮，感覺如果一直做一些重復的事情，還真的是很容易厭倦的择浊，所以也是時候停下來戴卜，總結(jié)一下自己這段時間遇到的一些小問題以及一些小感悟吧。項目中用到的是vue琢岩，但其實說實話投剥，對于其背后的核心以及真正的理念，自己還不是很清楚担孔，就先通過做項目江锨，了解一些基本的信息吧，再去慢慢體會糕篇，歡迎一起來交流呀啄育。
接下來就算是總結(jié)一下自己這段時間遇到的一些問題吧，同時補充一些基礎知識點拌消。
--------------------------------------------- 我是華麗的分割線 -------------------------------------------------------
- 路由基礎知識
$router: router實例挑豌，可以實現(xiàn)編程式導航，導航到不同的url墩崩。
基本的幾種跳轉(zhuǎn)方法：
router.push(location):用戶點擊返回會回到之前的url
router.replace(location): 不會向history中添加新的記錄氓英，會替換當前的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ù)鹦筹，變成導航到 /user/123 路徑
router.push({ name: 'user', params: { userId: 123 }})
$route: 當前激活的路由對象铝阐，這個屬性是只讀的，可以通過watch來檢測它铐拐。
當前的路由信息對象饰迹，有很多屬性
$route.path: 當前路由的路徑，'/foo/bar'
$route.params： 當前路由的參數(shù)余舶，可以根據(jù)該參數(shù)進行不同用戶的id的獲取
$route.query： 當前路由的URL的請求參數(shù)啊鸭，對于 /foo?user=1，則有 $route.query.user == 1
$route.hash： 當前路由的 hash 值 (帶 #) 匿值，如果沒有 hash 值赠制，則為空字符串。
$route.name： 當前路由的名字。
上面是vue中路由的一些基本的信息
實際項目中的應用與例子：
vue 實現(xiàn)分頁顯示和數(shù)據(jù)請求钟些，路由更新烟号。
在項目中需要實現(xiàn)表格的一個分頁顯示，那向后臺獲取數(shù)據(jù)的時候也需要帶上頁碼的數(shù)據(jù)參數(shù)政恍，當然汪拥，為了請求參數(shù)之后，路由的數(shù)據(jù)也跟著跳轉(zhuǎn)改變篙耗，除此之外迫筑，直接在地址欄輸入地址，也可以直接根據(jù)請求參數(shù)宗弯，向后臺獲取相應頁面的數(shù)據(jù)脯燃。那么我是在項目中做了這樣的操作。
1 綁定頁面切換事件蒙保，獲取當前頁碼辕棚，更改當前的路由地址。
2 監(jiān)聽路由變化邓厕，根據(jù)路由變化逝嚎，獲取參數(shù)，向后臺請求某頁的數(shù)據(jù)详恼。
3 目的懈糯，路由變化，數(shù)據(jù)請求變化单雾。頁面切換，路由變化她紫，數(shù)據(jù)也跟著變化硅堆。
當獲取的是表格中第一頁的數(shù)據(jù)，路由地址是：http://localhost:8998/#/cashierPage?page=1
當獲取的是表格中第二頁的數(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是當前顯示的頁面哭廉，
而@current-change事件是在current-page改變的時候會請求脊僚。
所以在main.js中，handleCurrentChange的處理就是
handleCurrentChange (val) {
this.$route.query.page = val // 其中val是當前的頁數(shù)遵绰。
this.$router.replace(route) // 這樣頁面就跳轉(zhuǎn)到相應的路由了辽幌。
此時的路由地址是：
}
當然增淹，僅僅這樣改變路由還是不夠的，還需要根據(jù)此時的路由的參數(shù)page參數(shù)乌企，去向后臺請求數(shù)據(jù)虑润。我的做法就是監(jiān)聽路由變化。
watch: {
// 監(jiān)聽路由變化加酵，隨時獲取新的列表信息
'$route': 'fetchData'
}
那么如何獲取數(shù)據(jù)就根據(jù)你后臺的接口地址來獲取了
// 獲取路由信息拳喻，得到當前的頁數(shù)。
fetchData () {
this.loading = true
this.page.cur = +this.$route.query.page || 1 // 這個就是當前要請求的頁數(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)
})
}
當點擊第一個之后码撰。路由跟著變化渗柿，點擊第一頁的時候，路由是
而此時的實現(xiàn)是：
2 數(shù)據(jù)獲取
https://router.vuejs.org/zh-cn/advanced/data-fetching.html
在路由跳轉(zhuǎn)的時候脖岛，相應的頁面也會跟著渲染朵栖，那么，官方文檔提出了兩種解決的方法柴梆。
導航完成之后獲仍山Α：先完成導航，然后在接下來的組件生命周期鉤子中獲取數(shù)據(jù)绍在。在數(shù)據(jù)獲取期間顯示『加載中』之類的指示门扇。
導航完成之前獲取：導航完成前偿渡，在路由的 enter 鉤子中獲取數(shù)據(jù)臼寄，在數(shù)據(jù)獲取成功后執(zhí)行導航。
從技術(shù)角度講溜宽，兩種方式都不錯 —— 就看你想要的用戶體驗是哪種吉拳。
而我更傾向于導航完成后去請求數(shù)據(jù)，這樣會比較方便簡單吧适揉。
頁面第一次初始化的時候留攒，就去請求數(shù)據(jù)。
created () {
// 組件創(chuàng)建完后獲取數(shù)據(jù)嫉嘀，
// 此時 data 已經(jīng)被 observed 了
this.fetchData()
},
watch: {
// 如果路由有變化炼邀，會再次執(zhí)行該方法
'$route': 'fetchData' // 只有這個頁面初始化之后，這個監(jiān)聽事件才開始生效
},
總結(jié)：
根據(jù)當前的路由參數(shù)剪侮，去向后臺發(fā)起相關(guān)的數(shù)據(jù)請求汤善；自己在實際項目中還有一個應用就是，需要向后臺請求不同的報表數(shù)據(jù)，這些報表的名字都不一樣红淡，所以點擊按鈕之后不狮，就設置當前的路由參數(shù)，再根據(jù)當前的路由參數(shù)去獲取相關(guān)的數(shù)據(jù)在旱，進行頁面的渲染摇零。
