亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

Vue2.0一個(gè)login跳轉(zhuǎn)實(shí)例

ninefive / 3687人閱讀

摘要：請(qǐng)輸入正確的用戶名和密碼接下來(lái)是這個(gè)頁(yè)面很簡(jiǎn)單，簡(jiǎn)單的寫(xiě)一些內(nèi)容作為測(cè)試是否登錄跳轉(zhuǎn)成功。路由攔截中判斷對(duì)象是否為空。

需要解決的問(wèn)題：
store存儲(chǔ)登錄狀態(tài)
Vue-Router導(dǎo)航鉤子攔截路由
Vue-Resource獲取后臺(tái)的數(shù)據(jù)
需要判斷登錄返回的user
源碼參考
原文地址

主要技術(shù)棧：Vuex + Vue-Resource + Vue-Router
后臺(tái)用mock-data來(lái)模擬數(shù)據(jù)。

先來(lái)看一下效果圖

第一步、起個(gè)項(xiàng)目打開(kāi)控制臺(tái)輸入

$ npm install --global vue-cli#創(chuàng)建一個(gè)自己的基于webpack的新項(xiàng)目
$ vue init webpack my-project(這里是你自己的工程名)
$ cd my-project(進(jìn)到你的工程文件夾下)
$ npm install (安裝依賴(lài))
$ npm run dev

注意：起工程的時(shí)候回讓你選擇ESLint,Test等等各種測(cè)試，這里都默認(rèn)選no就可以。

現(xiàn)在你的項(xiàng)目應(yīng)該跑起來(lái)了。打開(kāi)控制臺(tái)輸入npm run dev
應(yīng)該是這樣的。

好了起項(xiàng)目成功了，接下來(lái)擼起袖子加油干吧。
先來(lái)看一下項(xiàng)目結(jié)構(gòu):

第二步、配置一下mock-data。

{
    "users": [
        {
            "id" : 1,
            "username": "aaa",
            "password": "aaa"
        },
        {
            "id" : 2,
            "username": "bbb",
            "password": "bbb"
        },
        {
            "id": 3,
            "username": "ccc",
            "password": "ccc"
        }
    ]    
}

這里給指定了三個(gè)用戶名和密碼，在login登陸的時(shí)候只有輸入正確的用戶名和密碼才可以登陸實(shí)現(xiàn)頁(yè)面的跳轉(zhuǎn)。
第三步 配置view視圖層Login.vue文件中

接下來(lái)是Main.vue ,這個(gè)頁(yè)面很簡(jiǎn)單，簡(jiǎn)單的寫(xiě)一些內(nèi)容作為測(cè)試是否登錄跳轉(zhuǎn)成功。

下面來(lái)配置一下路由。routes.js

//先引入需要路由的文件
import Main from "../components/Main"
import Login from "../components/Login"

export default [
        {
            path: "/login",
            component: Login
        },
        {
            path: "/main", 
            meta: {
                // 添加該字段，表示進(jìn)入這個(gè)路由是需要登錄的
                 requireAuth: true,  
                },           
                component: Main,

        }
    ]

接下來(lái)是main.js(這里只對(duì)重點(diǎn)拿出來(lái)細(xì)說(shuō))

// 全局導(dǎo)航鉤子
 router.beforeEach((to, from, next) => {
     // 判斷該路由是否需要登錄權(quán)限
     if (to.meta.requireAuth) {
         // 通過(guò)vuex state獲取當(dāng)前的token是否存在
         // console.log(isEmptyObject(store.state.user)) 
         if(!isEmptyObject(store.state.user)) {   
             next();
         }
         else { 
             next({
                 path: "/login",
                query: {redirect: to.fullPath}  // 將跳轉(zhuǎn)的路由path作為參數(shù)，登錄成功后跳轉(zhuǎn)到該路由
            })
         }
     }
     else {
         next();
     }
 })


 function isEmptyObject(obj) {
     for (var key in obj) {
         return false;
     }
     return true;
 }
重點(diǎn)參考鏈接
路由攔截導(dǎo)航。路由攔截
JavaScipt中判斷對(duì)象是否為空。點(diǎn)擊這里

存在的問(wèn)題及待解決的問(wèn)題： 登陸數(shù)據(jù)存在store中，每次刷新頁(yè)面都會(huì)沒(méi)有了。接下來(lái)要用LocalStorage或者Cookie來(lái)保存數(shù)據(jù)。

源碼參考
原文地址

歡迎大神糾察指正，也希望前端愛(ài)好者提出寶貴意見(jiàn)，一起學(xué)習(xí)，一塊交流討論。喜歡的話請(qǐng)點(diǎn)個(gè)贊吧。（感謝閱讀）

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/81885.html

相關(guān)文章

  • vue2.0+axios+mock+axios-mock+adapter實(shí)現(xiàn)登陸

    摘要：做項(xiàng)目過(guò)程中，需要用到后臺(tái)模擬數(shù)據(jù)，在機(jī)緣巧合下發(fā)現(xiàn)了，在學(xué)習(xí)使用的過(guò)程中又偶遇了。 做項(xiàng)目過(guò)程中，需要用到后臺(tái)模擬數(shù)據(jù)，在機(jī)緣巧合下發(fā)現(xiàn)了mock，在學(xué)習(xí)使用的過(guò)程中又偶遇了axios-mock-adapter。現(xiàn)在將實(shí)例展示如下： 準(zhǔn)備 實(shí)例是建立在vue-cli的基礎(chǔ)上實(shí)現(xiàn)需要提前安裝的插件有：axios：npm install axio --savemockjs：npm ins...

    RancherLabs 評(píng)論0 收藏0

  • Vue2.0實(shí)用筆記

    摘要：實(shí)例中，可追蹤數(shù)據(jù)發(fā)生變化時(shí)，會(huì)開(kāi)啟一個(gè)隊(duì)列，把變化記錄其中，在下一次事件循環(huán)前，進(jìn)行去重優(yōu)化，然后重新渲染。最早通過(guò)實(shí)現(xiàn)了這一需求，通過(guò)事件可監(jiān)聽(tīng)的變化，實(shí)現(xiàn)不同頁(yè)面的操作。過(guò)濾器的使用通過(guò)引入中 1、vue中的過(guò)渡、動(dòng)畫(huà)效果 單組件（）v-enter,v-enter-to,v-enter-active,v-leave,v-leave-to,v-leave-active六種狀態(tài)。(定...

    draveness 評(píng)論0 收藏0

  • Vue2.0實(shí)用筆記

    摘要：實(shí)例中，可追蹤數(shù)據(jù)發(fā)生變化時(shí)，會(huì)開(kāi)啟一個(gè)隊(duì)列，把變化記錄其中，在下一次事件循環(huán)前，進(jìn)行去重優(yōu)化，然后重新渲染。最早通過(guò)實(shí)現(xiàn)了這一需求，通過(guò)事件可監(jiān)聽(tīng)的變化，實(shí)現(xiàn)不同頁(yè)面的操作。過(guò)濾器的使用通過(guò)引入中 1、vue中的過(guò)渡、動(dòng)畫(huà)效果 單組件（）v-enter,v-enter-to,v-enter-active,v-leave,v-leave-to,v-leave-active六種狀態(tài)。(定...

    maochunguang 評(píng)論0 收藏0

  • Vue2.0實(shí)用筆記

    摘要：實(shí)例中，可追蹤數(shù)據(jù)發(fā)生變化時(shí)，會(huì)開(kāi)啟一個(gè)隊(duì)列，把變化記錄其中，在下一次事件循環(huán)前，進(jìn)行去重優(yōu)化，然后重新渲染。最早通過(guò)實(shí)現(xiàn)了這一需求，通過(guò)事件可監(jiān)聽(tīng)的變化，實(shí)現(xiàn)不同頁(yè)面的操作。過(guò)濾器的使用通過(guò)引入中 1、vue中的過(guò)渡、動(dòng)畫(huà)效果 單組件（）v-enter,v-enter-to,v-enter-active,v-leave,v-leave-to,v-leave-active六種狀態(tài)。(定...

    JowayYoung 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<