Dynamic Routing Load a chat room based on its document ID with the Vue Router

This lesson is available for PRO members or as a single course purchase. Sign-in and choose a plan below.
Get Unlimited PRO Access


*Enrollment provides full access to this course (and updates) for life.

Router Config

file_type_js_official main.js
import ChatRoom from './components/ChatRoom'

const router = new VueRouter({
  routes: [

    { path: '/chats/:id', component: ChatRoom, name: 'chat' }
<router-link :to="{ name: 'chat', params: { id: chat.id } }">{{ chat.id }}</router-link>

ChatRoom Component

  <main class="section">
    <h3>Welcome to ChatRoom.vue {{ chatId }}</h3>

    <router-link to="/">Back</router-link>



export default {
  computed: {
    chatId() {
      return this.$route.params.id;



Ask questions via GitHub below OR chat on Slack #questions