• 目標(biāo)：實現(xiàn)“主頁”、“用戶登錄”、“用戶登出”和“用戶信息”四個頁面，主頁根據(jù)用戶登錄情況，展現(xiàn)不同信息，用戶信息和登出頁面需要用戶已經(jīng)登錄的狀態(tài)。
• 目的：初步掌握vue、vuex和vue-router，貫通vue單頁面應(yīng)用流程與配置
• 頁面：
• 首頁
• 用戶信息頁
• 登出

1.用戶狀態(tài)管理

采用vuex儲存，在每一個mutations中不僅改變用戶狀態(tài)，而且使用sessionStorage存儲用戶信息
每個分頁面通過store的state判斷用戶是否已登錄

2.vue-router

• 利用導(dǎo)航鉤子判斷路由元信息是否包含登錄驗證
• 動態(tài)路由匹配

3.ajax

可采用vue-resourse或axios

總結(jié)

總結(jié)起來，其實用到的東西并不多，但是一開始寫還是很多沒有思路，慢慢有思路，對照官方文檔就好。
遇到的問題：vuex用到module，因此在往state里添加信息的時候注意要先索引module的名稱

不足之處

每個頁面用的公共header，本想放置到app.vue中去，但是登錄了以后發(fā)現(xiàn)雖然store的state變化了，但是header雖然依據(jù)了state狀態(tài)，但并未發(fā)生改變，嘗試多種寫法無效后，把每個頁面都添加了header組件，這樣跳轉(zhuǎn)的時候header狀態(tài)自然發(fā)生了變化。

具體參見項目地址