vueRouter动态路由(实现菜单权限控制)

在Vue.js中，使用vue-router可以实现动态路由来控制菜单权限。以下是一个简单的例子：

1. 定义路由配置，其中name属性用于菜单项的匹配，path属性为路由路径，meta属性用于存储权限信息。

const routes = [
  {
    path: '/home',
    name: 'home',
    component: Home,
    meta: { requiresAuth: true }
  },
  {
    path: '/admin',
    name: 'admin',
    component: Admin,
    meta: { requiresAuth: true, requiresAdmin: true }
  },
  // ...更多路由
];

2. 使用路由守卫来根据用户的权限动态添加路由。

const router = new VueRouter({
  routes
});
 
router.beforeEach((to, from, next) => {
  // 假设用户信息和权限信息已经从服务器获取
  const user = {
    isAuthenticated: true,
    isAdmin: true
  };
 
  const access = to.matched.some(record => record.meta.requiresAuth);
  if (access && !user.isAuthenticated) {
    // 跳转到登录页面或其他页面
    next('/login');
  } else {
    // 如果是管理员页面，还需要检查是否有管理员权限
    if (to.matched.some(record => record.meta.requiresAdmin) && !user.isAdmin) {
      next('/not-allowed'); // 跳转到无权限页面
    } else {
      next(); // 正常跳转
    }
  }
});

3. 将router实例传递给Vue实例。

new Vue({
  router,
  // ...其他选项
}).$mount('#app');

这样，你就可以根据用户的权限动态地控制菜单项的显示和隐藏，以及路由的可访问性。