Vue 路由元信息的使用场景和代码演示

35 min read

Vue 路由元信息（Route Meta Fields）是一种在 Vue 路由中添加自定义信息的方法。它可以在路由配置中定义元信息，然后在路由导航守卫、组件中访问这些信息，从而实现对路由的精细控制和定制。

以下是一些 Vue 路由元信息的使用场景和代码演示：

  1. 控制页面访问权限：可以使用元信息来标识某个页面是否需要登录才能访问。在路由配置中添加 meta 属性，例如：
const routes = [
  {
    path: '/dashboard',
    component: Dashboard,
    meta: { requiresAuth: true }
  },
  // ...
];

然后在路由导航守卫 beforeEach 中判断该页面是否需要登录：

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated()) {
    // 用户未登录，重定向到登录页
    next('/login');
  } else {
    next();
  }
});
  1. 添加页面标题：可以使用元信息来在每个页面中设置标题。在路由配置中添加 meta 属性，例如：
const routes = [
  {
    path: '/dashboard',
    component: Dashboard,
    meta: { title: 'Dashboard' }
  },
  // ...
];

然后在组件的钩子函数 created 中设置页面标题：

export default {
  created() {
    document.title = this.$route.meta.title;
  }
}
  1. 页面统计和分析：可以使用元信息来标识一些需要统计和分析的页面。在路由配置中添加 meta 属性，例如：
const routes = [
  {
    path: '/dashboard',
    component: Dashboard,
    meta: { track: 'dashboard' }
  },
  // ...
];

然后在路由导航守卫 afterEach 中发送页面统计信息：

router.afterEach((to, from) => {
  // 发送页面统计信息
  trackPage(to.meta.track);
});

上述场景只是 Vue 路由元信息的几个示例，实际上，可以根据自己的需要，在路由配置中定义更多的元信息，并在组件、导航守卫等地方使用这些信息。元信息为我们提供了一种更灵活和精细的控制和定制路由的方式。