Vue.js 路由 meta 参数使用

Vue.js 是一款流行的前端框架，它提供了很多方便的功能，其中包括路由。Vue.js 路由是一种用于实现前端页面跳转的技术，它可以让我们在不刷新整个页面的情况下，实现页面之间的切换。在 Vue.js 路由中，meta 参数是非常常用的一个参数，它可以用于给路由添加一些额外的信息。

meta 参数是什么？

meta 参数是 Vue.js 路由中的一个对象参数，它可以包含一些额外的信息。这些信息可以用于实现一些特殊的功能，例如：路由鉴权、页面标题设置、页面样式设置等等。在 meta 参数中，可以自定义一些属性，用于传递各种信息。

meta 参数的使用

在 Vue.js 路由中，meta 参数的使用非常简单，只需要在路由配置中添加 meta 属性即可。下面是一个简单的示例：

// javascriptcn.com 代码示例
const router = new VueRouter({
  routes: [
    {
      path: '/home',
      component: Home,
      meta: {
        title: '首页',
        requireAuth: true
      }
    },
    {
      path: '/about',
      component: About,
      meta: {
        title: '关于我们',
        requireAuth: false
      }
    }
  ]
})

在上面的示例中，我们定义了两个路由，分别对应着首页和关于我们页面。在每个路由中，我们都定义了一个 meta 属性，用于添加一些额外的信息。其中，title 属性用于设置页面的标题，requireAuth 属性用于设置该页面是否需要鉴权。

meta 参数的深入应用

除了上面的示例，meta 参数还可以用于实现一些更加深入的应用。下面是一些示例：

路由鉴权

在实际开发中，我们可能需要对某些页面进行鉴权，只有在用户登录之后才能访问。这时，我们可以在路由中添加 requireAuth 属性，用于表示该页面是否需要鉴权。下面是一个示例：

// javascriptcn.com 代码示例
const router = new VueRouter({
  routes: [
    {
      path: '/home',
      component: Home,
      meta: {
        title: '首页',
        requireAuth: true
      }
    },
    {
      path: '/about',
      component: About,
      meta: {
        title: '关于我们',
        requireAuth: false
      }
    }
  ]
})

router.beforeEach((to, from, next) => {
  if (to.meta.requireAuth && !isLogin()) {
    next('/login')
  } else {
    next()
  }
})

在上面的示例中，我们定义了一个全局的路由守卫 beforeEach，它会在每次路由跳转之前执行。在守卫中，我们判断了当前路由是否需要鉴权，如果需要鉴权且用户没有登录，则跳转到登录页面。

页面标题设置

在实际开发中，我们可能需要根据不同的页面设置不同的标题。这时，我们可以在路由中添加 title 属性，用于设置页面的标题。下面是一个示例：

// javascriptcn.com 代码示例
const router = new VueRouter({
  routes: [
    {
      path: '/home',
      component: Home,
      meta: {
        title: '首页'
      }
    },
    {
      path: '/about',
      component: About,
      meta: {
        title: '关于我们'
      }
    }
  ]
})

router.afterEach((to, from) => {
  document.title = to.meta.title || '默认标题'
})

在上面的示例中，我们定义了一个全局的路由守卫 afterEach，它会在每次路由跳转之后执行。在守卫中，我们获取了当前路由的 title 属性，用于设置页面的标题。

页面样式设置

在实际开发中，我们可能需要根据不同的页面设置不同的样式。这时，我们可以在路由中添加 className 属性，用于设置页面的样式类。下面是一个示例：

// javascriptcn.com 代码示例
const router = new VueRouter({
  routes: [
    {
      path: '/home',
      component: Home,
      meta: {
        className: 'home-page'
      }
    },
    {
      path: '/about',
      component: About,
      meta: {
        className: 'about-page'
      }
    }
  ]
})

router.afterEach((to, from) => {
  const className = to.meta.className || ''
  document.body.className = className
})

在上面的示例中，我们定义了一个全局的路由守卫 afterEach，它会在每次路由跳转之后执行。在守卫中，我们获取了当前路由的 className 属性，用于设置页面的样式类。

总结

在 Vue.js 路由中，meta 参数是一个非常实用的参数，它可以用于给路由添加一些额外的信息。在实际开发中，我们可以通过 meta 参数实现一些特殊的功能，例如：路由鉴权、页面标题设置、页面样式设置等等。掌握 meta 参数的使用，可以让我们更加灵活地应对各种开发需求。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/655abb66d2f5e1655d4f0695