title: How to load different component if route has params using VueJS Router
body: <p>I'm looking for a proper way to load a different VueJS component if there are any props included in a route.</p>
  
  <p>For example, if I go to </p>
  
  <blockquote>
    <p>/users</p>
  </blockquote>
  
  <p>I get the users list page and if I'd go to </p>
  
  <blockquote>
    <p>/users/1</p>
  </blockquote>
  
  <p>I would go to user profile page.</p>
  
  <p>I've been trying to add another route as a child with parameters but it wouldn't seem to help:</p>
  
  <pre><code>{
              path: "users",
              name: "users",
              component: UsersList,
              children: [
                  {
                      path: "users/:userId",
                      name: "User Profile",
                      component: UserProfile,
                  },
              ]
  },
  </code></pre>
  
  <p>I am pushing the user profile route from a method like this:</p>
  
  <pre><code>this.$router.push({ path: 'users', name: 'User Profile', query: { userId: row.id }})
  </code></pre>
  
  <p>Any ideas?</p>