VueRouter進階（2）-路由元信息

CoXie 發布于2019-08-21 18:24 / 3119人閱讀

摘要：簡單介紹主人公字段介紹我們稱每個路由對象為路由記錄，路由記錄可以嵌套。所以到我們匹配到一個路有的時候他有可能有多條路由記錄。

路由元信息

為什么會有這個東西呢？
我們知道我們瀏覽一些網站的時候有需要驗證登錄的也有不需要驗證登錄的，如果所有頁面都在做成驗證登錄的話對于用戶的體驗也是極差的，所以這個時候路由元信息就起到了很大的作用。

簡單介紹

主人公：meta字段

介紹：
我們稱每個路由對象為路由記錄，路由記錄可以嵌套。所以到我們匹配到一個路有的時候他有可能有多條路由記錄。路由記錄會暴露在對應路由對象上，我們可以通過$route.matched獲取到當前路由所有的路由記錄，$route.matched[n].meta可以獲取其中一個路由記錄的meta字段

栗子：

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

假設localhost:8080為項目地址
當訪問localhost:8080/#/foo/bar的時候我們需要判斷登錄怎么辦呢
上代碼（用到了導航守衛的全局守衛中的beforeEach）：

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

云服務器 GPU云服務器智能路由0元智能無線路由器0元 2元vps 虛擬主機2元

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90429.html

VueRouter進階一(導航鉤子和路由元信息)

摘要：有多種方式可以在路由導航發生時執行鉤子全局的單個路由獨享的或者組件級的。進行管道中的下一個鉤子。當前的導航被中斷，然后進行一個新的導航。通過訪問組件實例路由元信息你可以在中直接訪問。導航鉤子 vue-router 提供的導航鉤子主要用來攔截導航，讓它完成跳轉或取消。有多種方式可以在路由導航發生時執行鉤子：全局的, 單個路由獨享的, 或者組件級的。全局鉤子你可以使用 router....

liukai90 2019-08-22 11:05 評論0 收藏0
VueRouter進階四(滾動行為)

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

kumfo 2019-08-22 11:05 評論0 收藏0
VueRouter進階（1）-導航守衛

摘要：簡介主要用來通過跳轉或取消的方式守衛導航。判斷必要操作是否進行沒進行的話中斷跳轉。進行管道中的下一個鉤子。如果全部鉤子執行完了，則導航的狀態就是確認的。中斷當前的導航。如果傳入的參數是一個實例，則導航會被終止且該錯誤會被傳遞給注冊過的回調。簡介主要用來通過跳轉或取消的方式守衛導航。例如判斷登錄信息：沒登錄全部跳到登錄頁。判斷必要操作是否進行沒進行的話中斷跳轉。分為三大類：全局守衛...

renweihub 2019-08-21 18:22 評論0 收藏0
Vue路由

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

church 2019-08-21 16:26 評論0 收藏0
VueRouter

摘要：當對應的路由匹配成功，將自動設置屬性值。執行效果依賴方法的調用參數。而這個鉤子就會在這個情況下被調用。滾動行為只在支持的瀏覽器中可用。當且僅當導航通過瀏覽器的前進后退按鈕觸發時才可用。當對應的路由匹配成功，將自動設置 class 屬性值 .router-link-active 。默認 hash 模式：使用 URL 的 hash 來模擬一個完整的 URL，于是當 URL 改變時...

劉厚水 2019-08-23 18:08 評論0 收藏0