当前位置：首页 > VUE

vue里面动态路由实现

2026-01-21 23:11:26VUE

动态路由实现方法

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

基于用户权限的动态路由

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

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

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

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

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

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

基于参数的路由匹配

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

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

组件内获取参数 通过$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() {
      // 获取新数据
    }
  }
}

vue里面动态路由实现