vue动态路由

Vue动态路由是一种通过配置路由参数来动态生成路由的方式。它允许根据不同的参数值生成不同的路由，以满足不同的需求。

在Vue中，可以通过在路由配置中使用冒号（:）来定义动态路由参数。例如，可以定义一个带有动态参数的路由路径：

{
  path: '/user/:id',
  component: User
}

在这个例子中，:id是一个动态参数，它可以匹配任意的路径片段，并将其作为参数传递给组件。当访问/user/1时，id参数的值将为1。

在组件中，可以通过$route.params来访问动态路由参数。例如，在上面的例子中，可以在User组件中这样访问id参数：

export default {
  created() {
    console.log(this.$route.params.id); // 输出 1
  }
}

动态路由也可以在路由配置中使用嵌套路由。例如，可以定义一个带有动态参数的嵌套路由：

{
  path: '/user/:id',
  component: User,
  children: [
    {
      path: 'profile',
      component: UserProfile
    },
    {
      path: 'posts',
      component: UserPosts
    }
  ]
}

在这个例子中，/user/1/profile将匹配到UserProfile组件，/user/1/posts将匹配到UserPosts组件。id参数的值将在子组件中可用。

动态路由是Vue中非常强大和灵活的特性，它可以帮助我们根据不同的参数值生成不同的路由，并实现更复杂的路由逻辑