Vue3使用Vue Router实现前端路由控制

npm install vue-router@next

import HomeView from '../views/HomeView.vue'
import AdminView from '@/views/AdminView.vue'
import AboutView from '../views/AboutView.vue'
import ChildenList from '@/views/childenList.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      children: [  
        {  
          path: 'ChildenList',  
          name: 'ChildenList',  
          component: ChildenList,  
          meta: { requiresAuth: true, role: 'admin' }
        }],
      //  component:AboutView,
    },
    {
      path: '/admin',
      name: 'admin',
      component:AdminView,
      meta: { requiresAuth: true, role: 'admin' }
    }
  ]

router.beforeEach((to, from, next) => {
  const user = "name" // 假设这是从localStorage获取用户信息的函数
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // 这个路由需要权限
    if (!user || (to.meta.role && user !== to.meta.role)) {
      // 用户未登录或者角色不匹配
      next({ path: '/about'}) // 重定向到登录页面
    } else {
      // 用户已登录且角色匹配
      next()
    }
  } else {
    // 这个路由不需要权限
    next()
  }
})

export default router