/Vue Router

Route Meta Fields

You can include a meta field when defining a route:

const router = new VueRouter({
  routes: [
      path: '/foo',
      component: Foo,
      children: [
          path: 'bar',
          component: Bar,
          // a meta field
          meta: { requiresAuth: true }

So how do we access this meta field?

First, each route object in the routes configuration is called a route record. Route records may be nested. Therefore when a route is matched, it can potentially match more than one route record.

For example, with the above route config, the URL /foo/bar will match both the parent route record and the child route record.

All route records matched by a route are exposed on the $route object (and also route objects in navigation guards) as the $route.matched Array. Therefore, we will need to iterate over $route.matched to check for meta fields in route records.

An example use case is checking for a meta field in the global navigation guard:

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // this route requires auth, check if logged in
    // if not, redirect to login page.
    if (!auth.loggedIn()) {
        path: '/login',
        query: { redirect: to.fullPath }
    } else {
  } else {
    next() // make sure to always call next()!

© 2013–present Evan You
Licensed under the MIT License.