Introducing Vue-Router and Loading URL-Based Components Chapter 8GET parameters
Along with the dynamic routes, Vue-router handles GET parameters in a really simple way.
GET parameters are extra URL parameters you can pass to a web page that appear as
key/value pairs. With GET parameters, the first one is preceded by a ?—this tells the
browser to expect parameters. Any further parameters are separated by an ampersand. An
example would be:
example.com/?name=sarah&emotion=happyThis URL would yield sarah as the value of name and happy as the value for emotion.
They are normally used for filtering or search—next time you search for something on
Google, take a look at the URL and you will notice ?q=Your+search+query in the address
bar.
Vue router makes these parameters available to the developer within the query object in
the this.$route variable. Try adding ?name=sarah to the end of your URL and opening
the JavaScript developer tool. Inspecting the query object will reveal an object with name as
the key and sarah as the value:
We'll be using the query object when we build the filtering in our shop categories.
Using props
Although using router parameters directly within the component works perfectly fine, it is
not good practice as it ties the component directly to the route. Instead, props should be
used—in the same way, we used them earlier in the book for HTML components. When
enabled and declared, the parameter passed in via the URL becomes available to use as
though it had been passed in via an HTML attribute.