vue里面动态路由实现

动态路由实现方法

在Vue中实现动态路由通常涉及两种场景：基于用户权限的动态路由和基于参数的路由匹配。以下是具体实现方式：

基于用户权限的动态路由

1. 定义静态路由与动态路由 静态路由为无需权限的公共页面（如登录页），动态路由根据用户角色从后端获取。

   

   // router/index.js
   const staticRoutes = [
     { path: '/login', component: Login },
     { path: '/404', component: NotFound }
   ]
   
   const dynamicRoutes = [
     { path: '/admin', component: Admin, meta: { role: 'admin' }},
     { path: '/user', component: User, meta: { role: 'user' }}
   ]

2. 路由拦截与动态添加 在全局前置守卫中请求用户权限数据，过滤出有权限的路由并动态添加。

   router.beforeEach(async (to, from, next) => {
     const hasToken = localStorage.getItem('token')
     if (hasToken) {
       if (to.path === '/login') {
         next('/')
       } else {
         if (!store.state.user.addedRoutes) {
           const roles = await getCurrentUserRoles()
           const accessibleRoutes = filterRoutes(dynamicRoutes, roles)
           router.addRoutes(accessibleRoutes)
           store.commit('user/SET_ADDED_ROUTES', true)
           next({ ...to, replace: true })
         } else {
           next()
         }
       }
     } else {
       next('/login')
     }
   })

3. 路由过滤函数 根据用户角色筛选可访问路由。

   

   function filterRoutes(routes, roles) {
     return routes.filter(route => {
       if (route.meta && route.meta.role) {
         return roles.includes(route.meta.role)
       }
       return true
     })
   }

基于参数的路由匹配

1. 路由配置 使用冒号声明动态路径参数。

   const routes = [
     { path: '/user/:id', component: UserDetail }
   ]

2. 组件内获取参数 通过$route对象或props接收参数。

   // 方式1：通过$route
   export default {
     created() {
       console.log(this.$route.params.id)
     }
   }
   
   // 方式2：通过props（推荐）
   const routes = [
     { path: '/user/:id', component: UserDetail, props: true }
   ]
   export default {
     props: ['id'],
     created() {
       console.log(this.id)
     }
   }

动态路由的注意事项

• 使用addRoutes添加的路由在刷新后会丢失，需要配合vuex持久化存储权限信息
• 404页面路由需最后添加，否则会拦截动态路由
• 动态参数变化时组件会复用，需要通过监听$route或使用beforeRouteUpdate钩子更新数据

export default {
  watch: {
    '$route'(to, from) {
      if (to.params.id !== from.params.id) {
        this.fetchData()
      }
    }
  },
  methods: {
    fetchData() {
      // 获取新数据
    }
  }
}