Properties of the “route” object
Vue 3 note (2026): Bootstrap API for these examples should use Vue Router 4: createRouter({ history: createWebHistory(), routes }) and app.use(router). Concepts below (params, nested routes, redirects) still apply.
The “route” object contains all the information about the current route, which can always be accessed from the application via one of its properties:
- $route.path – A string equal to the path of the current route, always resolved as an absolute path (eg “/user/profile”).
- $route.params – A key/value object used to return data from dynamic routes. If there are no parameters, the value will be an empty object.
- $route.query – A key/value object used to return query string data.
- $route.fullPath – full URL including query and hash.
- $route.matched – An array containing the path records of the current route
- $route.name – The name of the current route if it is defined
- $route.redirectedFrom – The name of the route from which the redirection was performed if there is a redirection
Query string
Query string is the part of the URL that is added to the end of the standard URL after the question mark (?) and contains data that is usually in the form of key/value pairs.
|
1 |
http://example.com/?bar1=a&bar2=b |
Retrieving data from query string
Using the route property “$route.query” we can get what was sent through the query string within the URL. The question mark is not part of the query string. The $route.query object contains key/value pairs.
Example
For url address: /foo?user=1:
|
1 |
$route.query.user == 1 |
Inserting data into the query string
One of the ways to insert query parameters into a route is through the attribute “to”<router-link> tag:
|
1 |
<router-link tag="li" to="/user/?status=awesome">User B</router-link> |
Object syntax can also be used:
|
1 |
<router-link :to="{name:'user', query:{status:'awesome'}}" >User</router-link> |
Named routes
Vue router offers the possibility of creating so-called named routes, which make it easier for us to call those routes, because the assigned name can be used instead of the path. Route naming is done by defining the “name” property.
routes.js
|
1 2 3 4 |
export const routes = [ {path: '/', component: Home, name: 'home'}, {path: '/user', component: User, name: 'user'}, ]; |
After defining the “name” property, we can access the route very easily using only the “name” property without using the “path” property:
|
1 |
<router-link :to="{name:'home'}" exact>Home</router-link> |
or
|
1 |
this.$router.push({name: 'home'}); |
Dynamic routes
In the event that we need a large number of pages but with the same structure, where only data is changed in the intended places (a classic example of this is the “user page”, which uses the same template for all users, but with different content), it would be stupid to create a new route for each page.
For this reason, the so-called “dynamic routes” that will use the same component, but with different content depending on the value passed as the dynamic part of the url.
|
1 |
www.example/user/dinamickideo |
Defining a dynamic route
In the frameA Vue.js dynamic part of a route is defined by adding a variable preceded by a colon:
routes.js
|
1 2 3 4 5 6 7 |
export const routes = [ { path: '/user/:id', name: 'user', component: User } ]; |
Data collection from dynamic route
To use a dynamic route parameter in Vue.js, we need to use this.$route.params.dynamicVariable (eg this.$route.params.id).
Example
In this example, the variable “id” stores the value of the dynamic part of the route.
|
1 2 3 4 5 6 7 8 9 |
<script> export default { data() { return { userId: this.$route.params.id } } } </script> |
Example of collecting data from a dynamic route
Example of data collection in the case of two unmonitored dynamic routes:
watch “$route” object
At the moment when we are already on a dynamic route and we want to load a new page by changing only the dynamic part of the url address (for example, we go from one user profile to another), a problem arises because Vue.js will not load the new content. In other words, changing only the dynamic part of the url will not force Vue.js to reload the same component with the changed data.
In order to solve the problem, we have to monitor (watch) the $route object and thus ensure that the application reacts to the change of the dynamic part of the url address. After the change the “watcher” would call the corresponding callback function.
Example
In this example, the change of the $route object is monitored, and after the change, the callback function is called, which updates the “id” property of the data object.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
data() { return { userId: this.$route.params.id } } methods:{ updateCallback () { this.userId = this.$route.params.id } } watch: { '$route': 'updateCallback' } |
Dynamic routes & <router-link>
To list dynamic links, we need to pass the dynamic route through the “params” attribute.
Example
For a dynamic route:
|
1 2 3 4 5 |
{ path: '/user/:id', name: 'user', component: User } |
the following listing code is used where it is necessary to pass the dynamic route through the “params” attribute in addition to the “name” attribute (the variable in the dynamic route is represented by :id):
|
1 2 3 4 5 |
<ul> <li v-for="izlistanId in userId" v-bind:key="id"> <router-link :to="{ name: 'user', params: { id: izlistanId }"> User {{ izlistanId }} </router-link> </li> </ul> |
Nested routes
In case the station has sub-pages, then when the user comes to the main page, we want them to be offered a new navigation (the so-called “sub-menu”) that allows them to visit the sub-pages (e.g. for the main page, “user” should be replaced with the pages “user-profile” and “user-edit)”. In addition, we want the URL address to be changed in this manner. To achieve this, we can use nested routes (eng. nested routes) within the component that makes up the main page.
Nested routes are obtained by adding a new property in the route formain page named “children”. This property is an array of objects containing sub-routes:
|
1 2 3 4 5 6 |
{path: '/user', component: User, children: [ {path: '/', component: UserStartPage}, {path: 'profil', component: Profil}, {path: 'edit-profil', component: EditProfil} ] } |
Then it is necessary within the main page template (in this example “user”) to insert the desired navigation with the component <router-view></router-view> :
We can now define navigation to these sub-routes:
|
1 2 3 4 |
<ul class="list-group"> <router-link tag="li" to="/user/pera">User Pera</router-link> <router-link tag="li" to="/user/mika">User Mika</router-link> </ul> |
Example
Route Redirection
Global Redirection
Redirect means that the application redirects the user who wants to visit a page with one route ( /a ), to some other page (eg “b”). After forwarding to another page, the application will also change the URL address to the appropriate one (/b).
|
1 2 3 4 5 |
const router = new VueRouter({ routes: [ { path: '/a', redirect: '/b' } ] }) |
The syntax for a named (“named”) route looks like this:
|
1 2 3 4 5 |
const router = new VueRouter({ routes: [ { path: '/a', redirect: { name: 'foo' }} ] }) |
Programmed redirection
Programmed redirection means the case when we want to open a certain page but under certain conditions (example: opening a new page after submitting the form)
Example $router.push()
In this example, we programmatically define the route change after clicking the button with the method $router.push()
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<template> <button @click="goHome">Home page</button> </template> <script> export default { methods: { goHome(){ this.$router.push({name : "Home"}) } } } </script> |
Example $router.go()
In this example, we programmatically define the route change after clicking the button with the method $router.go()
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<template> <button @click="goBack">Nazad</button> </template> <script> export default { methods: { goBack(){ this.$router.go(-1) } } } </script> |
NOTE:
It should be emphasized that the $router object also has methods: $router.back() and$router.forward() which do not even need to pass an argument.