basic routing for roomview

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>