九、Vue Router 進階-路由元信息meta

路由元信息 meta

在路由列表中，每個路由都有一個 meta元數據字段，我們可以在這里配置一些自定義信息，供頁面組件或路由鈎子函數中使用。在路由跳轉的時候，提供我們判斷條件。

<script>
	// 配置 meta 數據
    const router = new VueRouter({
        routes: [
            {
                path: '/',
                name: 'index', // 路由名稱
                component: index, // 映射的組件
                meta: {
                    title: '首頁'
                }
            }
        ] 
    });
</script>

在組件中獲取 meta 數據

<template>
	<div>
    	<h1>{{ $route.meta.title }}</h1>	
    </div>
</template>

在路由鈎子中獲取 meta 數據，一般用於： 改變網頁標題，用戶登錄鑒權

// 全局路由改變前導航守衛
router.beforeEach((to, from, next) => {
	// 通過元信息，改變對應網頁的標題
    window.document.title = to.meta.title;
    next();
});
// 注意：meta數據可以動態修改，如：this.$route.meta.title = '改變后的首頁'

示例： 用戶登錄鑒權， 如果沒有登錄則跳轉登錄界面

router.beforeEach((to, from, next) => {
    // 判斷是否需要登錄
    if (to.matched.some(record => record.meta.login )) {
        if (!login) { // 未登錄，則跳轉到登錄界面
            next({ 
                path: '/login',
                query: { redirect: to.fullPath } // 記錄登錄后跳轉到來源頁面
            })
        } else {
            next();
        }
    } else {
        next(); 
    }
});

Array some() 方法

用於檢查數組中的原生是否滿足指定條件，該方法會依次執行數組的每一個元素。**如果有一個元素滿足條件，則返回true，否則返回false。

var arr = [
    { login: true },
    { title: 'login' } 
]
arr.some((item) => item.login);  // 返回true