🚉 Dynamic Routing

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

Router Config

file_type_js 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;


Questions? Let's chat

Open Discord