vue路由权限控制的实现

在Vue中实现路由权限控制的一种常见方式是使用导航守卫（Navigation Guards）。导航守卫是Vue Router提供的一种机制，它可以让你在路由切换前、切换后、以及切换过程中进行一些操作，比如验证用户是否有权限访问某个页面。

下面是一个简单的实现步骤：

1. 在路由配置中定义需要进行权限控制的路由，并为其添加meta字段，用于存储该路由需要的权限信息。

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: {
      requiresAuth: true
    }
  },
  {
    path: '/login',
    name: 'Login',
    component: Login
  }
  // ...
]

在上面的代码中，我们定义了两个路由，Home路由需要进行权限控制，因此我们为其添加了requiresAuth字段，并将其设置为true。

2. 创建一个导航守卫函数，用于检查用户是否有权限访问当前路由。

router.beforeEach((to, from, next) => {
  const isLoggedIn = // 获取当前用户是否已登录的信息
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth)

  if (requiresAuth && !isLoggedIn) {
    next('/login')
  } else {
    next()
  }
})

在上面的代码中，我们通过to对象的matched属性获取到当前路由需要的权限信息，并通过isLoggedIn变量判断当前用户是否已经登录。如果当前路由需要权限控制而用户未登录，则跳转到登录页面；否则，直接进入该路由。

3. 在Vue组件中使用路由

<template>
  <div>
    <h1>Home Page</h1>
  </div>
</template>

<script>
export default {
  name: 'Home',
  mounted() {
    // do something after mounted
  }
}
</script>

在Vue组件中，我们只需要像平常一样使用路由即可，不需要进行额外的权限控制逻辑。

上述实现方式是一个简单的实现，实际项目中还需要考虑其他因素，比如用户角色、路由嵌套等因素。