九、Vue Router 进阶-路由元信息meta

标签：lse   记录   全局   class   script   next   进阶   each   redirect   

路由元信息 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

九、Vue Router 进阶-路由元信息meta

标签：lse   记录   全局   class   script   next   进阶   each   redirect   

原文地址：https://www.cnblogs.com/yuxi2018/p/11967281.html