VueRouter進(jìn)階（2）-路由元信息

CoXie 發(fā)布于2019-08-21 18:24 / 3129人閱讀

摘要：簡(jiǎn)單介紹主人公字段介紹我們稱每個(gè)路由對(duì)象為路由記錄，路由記錄可以嵌套。所以到我們匹配到一個(gè)路有的時(shí)候他有可能有多條路由記錄。

路由元信息

為什么會(huì)有這個(gè)東西呢？
我們知道我們?yōu)g覽一些網(wǎng)站的時(shí)候有需要驗(yàn)證登錄的也有不需要驗(yàn)證登錄的，如果所有頁(yè)面都在做成驗(yàn)證登錄的話對(duì)于用戶的體驗(yàn)也是極差的，所以這個(gè)時(shí)候路由元信息就起到了很大的作用。

簡(jiǎn)單介紹

主人公：meta字段

介紹：
我們稱每個(gè)路由對(duì)象為路由記錄，路由記錄可以嵌套。所以到我們匹配到一個(gè)路有的時(shí)候他有可能有多條路由記錄。路由記錄會(huì)暴露在對(duì)應(yīng)路由對(duì)象上，我們可以通過(guò)$route.matched獲取到當(dāng)前路由所有的路由記錄，$route.matched[n].meta可以獲取其中一個(gè)路由記錄的meta字段

栗子：

let routes = [{
    path: "/foo",
    name: "foo",
    component: foo,
    children: [{
        path: "bar",
        component: bar,
        meta: {
            needLogin: true//需要判斷登錄
        }
    }]
}, {
    path: "/login",
    name: "login",
    component: login
}];

假設(shè)localhost:8080為項(xiàng)目地址
當(dāng)訪問(wèn)localhost:8080/#/foo/bar的時(shí)候我們需要判斷登錄怎么辦呢
上代碼（用到了導(dǎo)航守衛(wèi)的全局守衛(wèi)中的beforeEach）：

let router = new VueRouter({
    routes
});
router.beforeEach((to, from, next) => {
    //判斷路由記錄是否需要驗(yàn)證登錄
    if(to.matched.some(current => current.meta.needLogin)){
        //只要記錄上需要登錄 我們就得驗(yàn)證
        /*
         * 自己封裝方法判斷登錄 sessionstorage localstorage cookie啥的自行決定
         */
         let isLogin = getLoginStatus();//自己定義的判斷登錄的方法
         if(!isLogin) {
             next({
                 path: "/login", //跳轉(zhuǎn)到登錄頁(yè)
                 query: {
                     redirect: to.fullPath //登錄頁(yè)需要知道從哪跳過(guò)來(lái)的，方便登錄成功后回到原頁(yè)面
                 }
             });
         } else {
             next();
         }
    } else {
        next();
    }
});
ATT： next一定要執(zhí)行不然鉤子函數(shù)不會(huì)resolved。

GPU云服務(wù)器云服務(wù)器智能路由0元智能無(wú)線路由器0元 2元vps 虛擬主機(jī)2元

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

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

相關(guān)文章

VueRouter進(jìn)階一(導(dǎo)航鉤子和路由元信息)

摘要：有多種方式可以在路由導(dǎo)航發(fā)生時(shí)執(zhí)行鉤子全局的單個(gè)路由獨(dú)享的或者組件級(jí)的。進(jìn)行管道中的下一個(gè)鉤子。當(dāng)前的導(dǎo)航被中斷，然后進(jìn)行一個(gè)新的導(dǎo)航。通過(guò)訪問(wèn)組件實(shí)例路由元信息你可以在中直接訪問(wèn)。導(dǎo)航鉤子 vue-router 提供的導(dǎo)航鉤子主要用來(lái)攔截導(dǎo)航，讓它完成跳轉(zhuǎn)或取消。有多種方式可以在路由導(dǎo)航發(fā)生時(shí)執(zhí)行鉤子：全局的, 單個(gè)路由獨(dú)享的, 或者組件級(jí)的。全局鉤子你可以使用 router....

liukai90 2019-08-22 11:05 評(píng)論0 收藏0
VueRouter進(jìn)階四(滾動(dòng)行為)

摘要：滾動(dòng)行為使用前端路由，當(dāng)切換到新路由時(shí)，想要頁(yè)面滾到頂部，或者是保持原先的滾動(dòng)位置，就像重新加載頁(yè)面那樣。這個(gè)方法返回滾動(dòng)位置的對(duì)象信息，長(zhǎng)這樣如果返回一個(gè)布爾假的值，或者是一個(gè)空對(duì)象，那么不會(huì)發(fā)生滾動(dòng)。滾動(dòng)行為使用前端路由，當(dāng)切換到新路由時(shí)，想要頁(yè)面滾到頂部，或者是保持原先的滾動(dòng)位置，就像重新加載頁(yè)面那樣。 vue-router 能做到，而且更好，它讓你可以自定義路由切換時(shí)頁(yè)面...

kumfo 2019-08-22 11:05 評(píng)論0 收藏0
VueRouter進(jìn)階（1）-導(dǎo)航守衛(wèi)

摘要：簡(jiǎn)介主要用來(lái)通過(guò)跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航。判斷必要操作是否進(jìn)行沒(méi)進(jìn)行的話中斷跳轉(zhuǎn)。進(jìn)行管道中的下一個(gè)鉤子。如果全部鉤子執(zhí)行完了，則導(dǎo)航的狀態(tài)就是確認(rèn)的。中斷當(dāng)前的導(dǎo)航。如果傳入的參數(shù)是一個(gè)實(shí)例，則導(dǎo)航會(huì)被終止且該錯(cuò)誤會(huì)被傳遞給注冊(cè)過(guò)的回調(diào)。簡(jiǎn)介主要用來(lái)通過(guò)跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航。例如判斷登錄信息：沒(méi)登錄全部跳到登錄頁(yè)。判斷必要操作是否進(jìn)行沒(méi)進(jìn)行的話中斷跳轉(zhuǎn)。分為三大類：全局守衛(wèi)...

renweihub 2019-08-21 18:22 評(píng)論0 收藏0
Vue路由

摘要：定義路由創(chuàng)建實(shí)例，然后傳配置創(chuàng)建和掛載根實(shí)例。有多種方式可以在路由導(dǎo)航發(fā)生時(shí)執(zhí)行鉤子全局的單個(gè)路由獨(dú)享的或者組件級(jí)的。例如，根據(jù)上面的路由配置，這個(gè)將會(huì)匹配父路由記錄以及子路由記錄。因此，我們需要遍歷來(lái)檢查路由記錄中的字段。 Vue-router(路由) 安裝 CDN引入(非打包)： NPM安裝(打包)： npm install vue-router 開(kāi)始使用在使用V...

church 2019-08-21 16:26 評(píng)論0 收藏0
VueRouter

摘要：當(dāng)對(duì)應(yīng)的路由匹配成功，將自動(dòng)設(shè)置屬性值。執(zhí)行效果依賴方法的調(diào)用參數(shù)。而這個(gè)鉤子就會(huì)在這個(gè)情況下被調(diào)用。滾動(dòng)行為只在支持的瀏覽器中可用。當(dāng)且僅當(dāng)導(dǎo)航通過(guò)瀏覽器的前進(jìn)后退按鈕觸發(fā)時(shí)才可用。當(dāng) 對(duì)應(yīng)的路由匹配成功，將自動(dòng)設(shè)置 class 屬性值 .router-link-active 。默認(rèn) hash 模式：使用 URL 的 hash 來(lái)模擬一個(gè)完整的 URL，于是當(dāng) URL 改變時(shí)...

劉厚水 2019-08-23 18:08 評(píng)論0 收藏0