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.


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

Or Signup for Unlimited PRO Access
👈 Query Chat Rooms
Query Messages 👉

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

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

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

  </main>
</template>

<script>

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

};
</script>

Q&A Chat