动态路由vue写法

动态路由是指根据不同的参数值动态生成不同的路由路径。在Vue中，我们可以通过使用路由参数来实现动态路由。动态路由的写法主要包括两个方面：路由配置和组件传参。

在路由配置中，我们需要定义一个动态路由，即在路由路径中使用冒号加上参数名的形式。例如，我们定义了一个名为`/user/:id`的动态路由，其中`:id`表示参数名，可以是任意值。

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

接下来，在组件中，我们可以通过`$route.params`来获取动态路由中的参数值。例如，在`User`组件中，我们可以通过`this.$route.params.id`来获取路由参数的值。

export default {
  name: 'User',
  mounted() {
    console.log(this.$route.params.id);
  }
}

上述代码中，我们在`mounted`生命周期钩子函数中打印出了路由参数的值。

除了使用`$route.params`来获取路由参数的值外，我们还可以通过`$router.push`方法来动态生成带有参数的路由路径。例如，我们可以在点击事件中使用`$router.push`方法来跳转到带有参数的路由路径。

export default {
  name: 'UserList',
  methods: {
    goToUser(id) {
      this.$router.push(`/user/${id}`);
    }
  }
}

上述代码中，我们定义了一个`goToUser`方法，当点击时会调用该方法，并通过`$router.push`方法动态生成带有参数的路由路径。

动态路由在实际开发中非常常见，特别是在需要根据不同的参数值展示不同内容的场景下。通过动态路由，我们可以根据不同的参数值来动态生成不同的路由路径，从而实现更灵活的页面展示和交互。我们还可以结合其他相关知识，如路由嵌套、路由守卫等，进一步扩展和优化动态路由的功能和使用方式。