淘先锋技术网

首页 1 2 3 4 5 6 7

在Vue中,我们可以轻松地获取路由参数。无论是在Vue Router中定义的动态路由还是query参数,我们都可以方便地在组件中访问它们。下面就来介绍一下如何获取路由参数!

vue拿到路由参数

假设我们有一个动态路由定义:/user/:id。我们想要在User组件中访问:id参数。我们可以使用$route.params对象来获取路由参数。具体代码如下:


  this.$route.params.id

上面的代码将返回动态路由中定义的:id参数的值。如果我们的动态路由定义为/user/:id/:name,我们可以使用this.$route.params.name来获取name参数的值。

如果我们想要访问query参数,我们可以使用$route.query对象。假设我们的URL是/user?id=123&name=John,我们可以使用如下代码访问id和name参数:


  this.$route.query.id // '123'
  this.$route.query.name // 'John'

在某些情况下,我们需要监听$route对象的变化来获取最新的路由参数。Vue提供了$route的watcher:$route对象的变化将会触发watcher。我们可以使用下面的代码来监听$route的变化:


  watch: {
    '$route' (to, from) {
      // 你想做的事情!
    }
  }

以上就是使用Vue获取路由参数的方法!无论是动态路由还是query参数,我们都可以轻松地访问它们并完成我们的业务需求。