路由元信息 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
原文地址:https://www.cnblogs.com/yuxi2018/p/11967281.html
时间: 2024-10-17 08:12:53