标签：

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