vue动态路由的实现

Vue动态路由的实现方法

使用路由参数

在路由配置中定义动态参数，通过冒号:标记动态部分。例如：

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

组件中通过$route.params.id访问参数。

响应路由参数变化

当参数变化但使用相同组件时，需要监听$route对象变化：

watch: {
  '$route'(to, from) {
    // 对路由变化作出响应
  }
}

编程式导航

通过router.push方法实现动态导航：

router.push({ path: `/user/${userId}` })

路由匹配语法

Vue Router 4.x支持更灵活的路由匹配：

• 可重复参数：/user/:id+
• 可选参数：/user/:id?
• 正则匹配：/:orderId(\\d+)

获取路由参数

在组件中可以通过以下方式获取：

// 选项式API
this.$route.params

// 组合式API
import { useRoute } from 'vue-router'
const route = useRoute()
const { id } = route.params

路由守卫处理

可以在全局或路由独享守卫中处理动态路由逻辑：

router.beforeEach((to, from) => {
  if (to.params.id) {
    // 验证参数逻辑
  }
})

动态添加路由

运行时动态添加路由规则：

router.addRoute({
  path: '/new/:dynamic',
  component: NewComponent
})

注意事项

• 动态路由参数变化时组件实例会被复用，需要正确处理生命周期
• 考虑404页面的处理，可添加通配符路由
• 对于复杂场景，建议使用路由元信息(meta)辅助处理