basic routing for roomview

front/src/App.vue

@@ -4,22 +4,18 @@ import { RouterView } from "vue-router";
 
 <template>
   <div id="app">
-    <!-- <router-link to="/">Home</router-link> -->
-    <RouterView/>
     <Sidebar />
-    <RoomView />
+    <RouterView/>
   </div>
 </template>
 
 <script>
 import Sidebar from './views/sidebar/Sidebar'
-import RoomView from './views/room/RoomView'
 
 export default {
   name: 'App',
   components: {
     Sidebar,
-    RoomView,
   },
 }
 </script>

front/src/router/index.js

@@ -1,5 +1,6 @@
 import { createRouter, createWebHistory } from "vue-router";
 import Home from "../views/Home";
+import RoomView from "../views/room/RoomView";
 
 const routes = [
   {
@@ -16,6 +17,11 @@ const routes = [
     component: () =>
       import(/* webpackChunkName: "about" */ "../views/About.vue"),
   },
+  {
+    path: "/:id",
+    name: "test",
+    component: RoomView
+  }
 ];
 
 const router = createRouter({

front/src/views/room/RoomView.vue

@@ -1,26 +1,30 @@
+<script setup>
+  import { useRoute } from "vue-router"
+  import { onBeforeMount } from "vue"
+  import Header from './Header.vue'
+
+  const route = useRoute();
+
+  onBeforeMount(() => {
+    // get data
+  });
+
+  const { id } = route.params;
+
+</script>
+
 <template>
     <div>
         <Header></Header>
         <div>
-           
             Room
             is thread
+            <b>{{ id }}</b>
         </div>
 
     </div>
 </template>
 
-<script>
-import Header from './Header.vue'
-
-export default {
-  name: 'RoomView',
-  components: {
-    Header
-  }
-}
-</script>
-
 <style scoped>
 div {
     background-color: #1D1D23;

front/src/views/sidebar/rooms/Room.vue

@@ -1,6 +1,12 @@
+<script setup>
+import { useRouter } from "vue-router"
+
+const router = useRouter();
+</script>
+
 <template>
     <div>
-        <div id="user">
+        <div id="user" @click="router.push(`/${data.id}`)">
             <BaseAvatar url="vue.png"/>
             <div id="content">
                 <div id="sender">{{ data.user }}</div>