当前位置：首页 > article >正文

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

article 2024/10/18 14:58:00

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

**在现代Web应用中，前端路由控制是非常重要的一部分。它可以帮助我们将不同的页面内容展示给用户，同时保持用户在浏览不同页面时的连贯性。本文将介绍如何使用Vue Router来实现前端路由控制。
首先，我们需要安装Vue Router。在项目根目录下运行以下命令：
**

npm install vue-router@next

安装完成后，我们可以开始编写代码了。首先，我们需要导入createRouter和createWebHistory函数，以及我们自定义的视图组件。

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

接下来，我们需要创建一个路由实例，并配置我们的路由规则。在这个例子中，我们有三个主页面：首页（HomeView）、关于页面（AboutView）和管理员页面（AdminView）。我们还定义了一个子路由（ChildenList），用于显示关于页面下的子页面。

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' }
    }
  ]

为了实现权限控制，我们需要在路由守卫中添加一些逻辑。在每个路由规则中，我们可以添加一个meta属性来指定该路由是否需要认证以及对应的角色。在这个例子中，我们为/about和/admin路由设置了requiresAuth和role属性

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()
  }
})

最后将router导出