我是基于vue腳手架cli做的,沒用過cli的可以看下我之前寫的cli腳手架搭建
(再補充一點,安裝腳手架的時候盡量選擇安裝路由。剩下的代碼規范那些可以選否)
后臺數據是用mock-data模擬的 下面會有具體步驟
開始啦:
1.初始化一個vue項目之后先來在目錄中創建mock-data.json文件,用于模擬數據
2.vue-cli默認的打開頁面是hello.vue,此時我們在components中新建兩個文件
3.完善登陸頁面
我是把hello中的東西都刪了 寫了個登陸后顯示頁面 大家隨意 這塊無所謂(是不是寫的有點太細太基礎了。。下面加快節奏)
4.配置路由:文件建好了。接下來吧路由配置下,下面這個是正常配置的路由↓↓↓↓↓
同樣在list里面也加上這個屬性 加這個屬性干啥呢?繼續看 下一步就知道了
5.此時路由弄好了,來到main.js中
在main.js中配置一個全局前置鉤子函數:router.beforeEach(),他的作用就是在每次路由切換的時候調用
這個鉤子方法會接收三個參數:to、from、next。
to:Route:即將要進入的目標的路由對象,
from:Route:當前導航正要離開的路由,
next:Function:個人理解這個方法就是函數結束后執行什么,先看官方解釋↓↓↓↓↓
1.next():進行管道中的下一個鉤子。如果全部鉤子執行完了,則導航的狀態就是confirmed(確認的),
2.next(false):中斷當前的導航。如果瀏覽器的url改變了(可能是用戶手動或瀏覽器后退按鈕),那么url地址會重置到from路由對應的地址。
3.next('/')或next({path:'/'}):跳轉到一個不同的地址。當前導航被中斷,進入一個新的導航。
6.判斷是否需要登錄
對這個字段進行判斷,如果沒有這個字段說明不需要登錄就能查看的頁面 就讓他next()就行了
這里有個坑,next()必須寫上,next()必須寫上,next()必須寫上,不然會報錯↓↓↓↓↓
7.現在能知道哪個頁面需要登錄了 接下來來到login頁面
login.vue里面的button有一個login方法,在login中我們用axios驗證賬號密碼
安裝axios:cnpm install axios --save
8.我們把session存好后就可以在main.js中用了
好了,至此就完成了一個簡單的登錄了,瀏覽器關閉后sessionStorage會清空的,所以當用戶關閉瀏覽器再打開是需要重新登錄的
當然也可以手動清除sessionStorage,清除動作可以做成注銷登錄,這個就簡單了↓↓↓↓↓
代碼不多 相信大家跟著來一遍就會了 ,有什么不足的希望大家能指正,共同學習!哪里不明白可以在下面評論,看到了我會解釋的
源碼地址:https://gitee.com/RtyXmd/vueDengLu.git
補充一點:有的朋友如果是直接clone下來的 安裝完依賴之后需要全局安裝json-server:cnmp install json-server -g
然后輸入json-server .\mock-data.json啟動之后就可以驗證數據了