📜

👤

💬

🎙️

🚉 Dynamic Routing

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

Router Config

main.js

import ChatRoom from './components/ChatRoom'

const router = new VueRouter({
  routes: [

    { path: '/chats/:id', component: ChatRoom, name: 'chat' }
  ]
})

Router Link

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

Questions? Let's chat