Customize web page using query parameters with help of $route.query

VueJS offers the possibility to access query parameters so that you can customise a certain's page content based on the given parameters.

For instance, we have the following method and the following query parameters:

```
https://*link*?message=Custom+Message
```

```
    getQuery() {
      if (this.$route.query.message) {
        this.queryMessage = this.$route.query.message
      }
    },
```

This method will set a variable according to the query parameter "message", that can be further used in the content of the page. For example in a heading:

```
    <h1>{{ queryMessage }}</h1>
```

Also, by using the functionality of $router combined with "v-if", the user can render components conditionally.

```
    getQuery() {
      if (this.$route.query.icon) {
        this.queryIcon = this.$route.query.icon === 'true'
      }
    },
```

```
    <svg v-if="queryIcon">
```

Therefore, when parsing a query containing:
```
?icon=true
```
only then, the svg will be  rendered.

Mihai Barbu
02 Nov 2021