Vue 带参数的动态路由

在 Vue 中，我们可以定义动态路由，以便根据不同的参数值展示不同的页面。在本文中，我们将讨论如何设置带参数的动态路由，以及如何在路由组件中访问这些参数。

定义动态路由

定义动态路由需要在路由配置中使用冒号（:）来表示参数。例如，我们可以定义一个动态路由来展示用户资料：

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

在上面的代码中，我们使用 :id 来表示一个名为 id 的参数。这意味着当用户访问 /user/123 时，路由会匹配到 User 组件，并将 id 参数设置为 123。

访问路由参数

在组件中访问路由参数非常简单。我们可以使用 $route.params 对象来获取参数值。例如，在上面的示例中，我们可以在 User 组件中访问 id 参数如下：

export default {
  name: 'User',
  methods: {
    getUser() {
      const id = this.$route.params.id;
      // ...
    }
  }
}

重用组件

如果我们需要在同一个组件中展示不同参数值的内容，我们可以使用 watch 监听 $route 对象的变化，并在参数变化时更新组件。例如，我们可以在 User 组件中重用相同的组件来展示不同用户的资料：

export default {
  name: 'User',
  watch: {
    '$route.params': function() {
      this.getUser();
    }
  },
  methods: {
    getUser() {
      const id = this.$route.params.id;
      // ...
    }
  }
}

在上面的代码中，我们使用 watch 监听 $route.params 对象的变化，并在参数变化时调用 getUser 方法。

小结

在本文中，我们学习了如何设置带参数的动态路由，并在路由组件中访问这些参数。我们还讨论了如何在同一个组件中重用相同的组件来展示不同参数值的内容。

希望这篇文章对你有所帮助，欢迎在评论区留下你的想法和问题。