使用 Vue Router 的 meta 属性实现多种功能

import Vue from 'vue'
import Router from 'vue-router'
 
Vue.use(Router)
 
const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/components/Home.vue'),
    meta: {
      auth: true, // 需要认证
      feature1: true, // 功能1
      feature2: false // 功能2
    }
  },
  // 更多的路由配置...
]
 
const router = new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
 
// 路由守卫示例：检查用户是否认证
router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.auth)) {
    // 检查用户是否认证，如果没有，跳转到登录页面
    if (!auth.isAuthenticated()) {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    } else {
      next()
    }
  } else {
    next() // 不需要认证则直接放行
  }
})
 
export default router

这个示例代码展示了如何在 Vue Router 中使用 meta 字段来控制路由的访问权限。在路由定义时，我们可以设置不同的 meta 属性来控制是否需要认证，以及是否启用特定的功能。然后，我们可以通过路由守卫来实现基于这些 meta 属性的路由守卫逻辑。这样，我们可以根据不同的路由配置来控制访问权限和功能启用状态。