Vue路由对象属性 .meta $route.matched详解

Vue路由对象属性 .meta $route.matched详解

简介

在Vue.js框架中，Vue Router是一个用于构建单页应用程序（SPA）的官方路由器库。Vue Router提供路由器对象，我们可以使用这个对象访问当前路由器的状态和信息，其中就包括路由对象属性.meta $route.matched。

$route.matched解析

一个路由匹配的记录可以包含多个命名视图的配置对象，下面是一个示例路由匹配的结果：

$route.matched = [
  // 渲染 home 组件时
  {
    components: { default: Home, sidebar: Sidebar },
    name: 'home',
    path: '/',
    meta: {
      isLogin: true,
      title: 'Home'
    }
  },
  // 渲染 user 组件时
  {
    components: { default: User, sidebar: Sidebar },
    path: '/user/:id',
    name: 'user',
    meta: {
      isLogin: false,
      title: 'User Profile'
    }
  }
];

可以看到，$route.matched是一个数组，其中每个元素表示一个被匹配到的路由对象。每个路由记录都包含了以下属性：

• components: 组件映射对象
• name: 命名视图名称
• path: 路由路径
• meta: 元数据对象

其中，meta是我们通常自定义定义的元数据对象，可以用来存储路由的一些额外信息，例如权限、标题等等。

.meta属性解析

我们可以使用$route.meta来获取当前路由对象的meta属性。例如，在路由配置中添加了一个meta属性，用于存储一个路由标题的数据：

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home,
    meta: {
      title: 'My Home Page'
    }
  },
  {
    path: '/about',
    name: 'about',
    component: About,
    meta: {
      title: 'About My Site'
    }
  }
];

我们可以在组件中通过$route.meta.title来访问这个数据：

<template>
  <div>
    <h1>{{ $route.meta.title }}</h1>
    <p>Welcome to my site!</p>
  </div>
</template>

<script>
export default {
  name: 'MyHomePage',
  mounted() {
    document.title = this.$route.meta.title + ' - MySiteName';
  }
};
</script>

示例说明

示例1：使用meta属性存储权限信息

假如我们需要判断用户是否有访问某个路由的权限，我们可以在路由中添加一个meta属性，例如：

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Home,
      meta: {
        allow: ['guest', 'user', 'admin']
      }
    },
    {
      path: '/dashboard',
      component: Dashboard,
      meta: {
        allow: ['user', 'admin']
      }
    },
    {
      path: '/admin',
      component: Admin,
      meta: {
        allow: ['admin']
      }
    }
  ]
});

在路由守卫中，可以使用$route.meta.allow来获取当前路由的允许的权限信息，例如：

router.beforeEach((to, from, next) => {
  if (!to.meta.allow.includes(getUserType())) {
    // 没有权限访问此路由，跳转到首页或登录页
    next('/');
  } else {
    next();
  }
});

示例2：使用$route.matched查找路由信息

在一个多级嵌套的路由中，有时候需要根据当前路由的信息，获取某个路由的信息。这时，可以使用$route.matched数组中的元素，例如：

const routes = [
  {
    path: '/',
    component: Home,
    children: [
      {
        path: 'about',
        component: About
      },
      {
        path: 'contact',
        component: Contact
      }
    ]
  }
];

在About组件中，如果需要获取Home的路由信息，可以这样使用$route.matched：

export default {
  name: 'About',
  mounted() {
    const homeRoute = this.$route.matched.find(
      record => record.path === '/'
    );
    console.log(homeRoute);
    // 输出： { path: '/', component: Home }
  }
};

上面的示例中，使用$route.matched数组中的find方法，查找path为/的记录，并获取component属性。