🚉 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

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

Open Discord