Vue.js – Ep.13 Dynamic routes with vue router

When building a single page application with Vue.js, dynamic routes are a powerful feature that allows you to create routes that are based on user input or data from an external source. In this episode, we will explore how to create dynamic routes using the vue router.

Setting up the vue router

The first step in creating dynamic routes is to set up the vue router in your Vue.js application. You can do this by installing the vue router using npm:

npm install vue-router

Once the vue router is installed, you can import it into your Vue.js application and use it to define your routes:

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  { path: '/user/:id', component: UserComponent }
]

const router = new VueRouter({
  routes
})

In the example above, we have defined a dynamic route that matches any path that starts with /user/ followed by a parameter id. When a user visits a URL that matches this pattern, the UserComponent will be rendered with the id parameter available as a prop.

Accessing dynamic route parameters

Once you have set up dynamic routes, you can access the route parameters in your components using this.$route.params:

const UserComponent = {
  template: `
    

      
User Profile
      
User ID: {{ $route.params.id }}
    
  `
}

In the example above, we are accessing the id parameter from the route and rendering it in the component template. You can also access other properties of the route object, such as this.$route.query for query parameters.

Programmatic navigation with dynamic routes

In addition to accessing dynamic route parameters, you can also navigate to dynamic routes programmatically using this.$router.push:

this.$router.push('/user/123')

In the example above, we are programmatically navigating to the /user/123 route. You can also pass route parameters as an object to navigate to dynamic routes with specific parameters:

this.$router.push({ path: '/user/123' })

Dynamic routes are a powerful feature of the vue router that allows you to create flexible and dynamic navigation within your Vue.js application. With dynamic routes, you can create routes that are based on user input or data from an external source, making your application more interactive and engaging for users.