hop

frontend/src/components/Banner.vue

 <template>
   <div class="banner">
     <div class="name">
-  <a href="/"><img class="logo" alt="Vue logo" src="../assets/logo.png" /></a>
+      <router-link :to="'/?uid=' + userId"
+        ><img class="logo" alt="Vue logo" src="../assets/logo.png"
+      /></router-link>
       <h1 class="text">CaCaoCritics</h1>
     </div>
     <SearchBar />
@@ -19,14 +21,25 @@ export default {
   name: "Banner",
   components: {
     BurgerMenu,
-    SearchBar
+    SearchBar,
+  },
+  data: function () {
+    return {
+      userId: "",
+    };
+  },
+  created() {
+    this.userId = this.$route.query.uid;
+    console.log("a");
+    console.log(this.$route.query.uid);
+    console.log("a");
   },
 };
 </script>
 
 <style>
 .banner {
-  background-color: #912F56;
+  background-color: #912f56;
   flex-direction: row;
   vertical-align: middle;
   display: flex;
@@ -35,11 +48,10 @@ export default {
 }
 .name {
   text-align: left;
-  background-color: #912F56;
+  background-color: #912f56;
   flex-direction: row;
   vertical-align: middle;
   display: flex;
-
 }
 .logo {
   max-width: 70px;

frontend/src/components/BurgerMenu.vue

@@ -10,7 +10,11 @@
         <a class="topnav_link" href="/users">USER</a>
       </nav>
 
-    <a id="topnav_hamburger_icon" href="javascript:void(0);" onclick="showResponsiveMenu()">
+      <a
+        id="topnav_hamburger_icon"
+        href="javascript:void(0);"
+        onclick="showResponsiveMenu()"
+      >
         <!-- Some spans to act as a hamburger -->
         <span></span>
         <span></span>
@@ -34,6 +38,11 @@
 <script>
 export default {
   methods: {
+    data: function () {
+      return {
+        userId: "",
+      };
+    },
     showResponsiveMenufunction: function () {
       var menu = document.getElementById("topnav_responsive_menu");
       var icon = document.getElementById("topnav_hamburger_icon");
@@ -49,13 +58,16 @@ export default {
       }
     },
   },
+  created() {
+    this.userId = this.$route.query.uid;
+  },
 };
 </script>
 
 <style scoped>
 /* ******************** NAV BAR ******************** */
 .topnav {
-  background-color: #912F56;
+  background-color: #912f56;
   display: flex;
   align-items: center;
   width: 100%;

frontend/src/views/Home.vue

@@ -3,7 +3,7 @@
   <div class="carousel">
    <carousel :items-to-show="5.5" autoplay=1300>
     <slide v-for="movie in movies" :key="movie.id" autoplay='True' transition="100" >
-        <router-link :to="'/movie/'+ movie.id">
+        <router-link :to="'/movie/'+ movie.id + '?uid=' + userId">
         <img
           :src="'https://image.tmdb.org/t/p/original/' + movie.poster_path"
           withd="100"
@@ -28,7 +28,7 @@
         <h5 class="center"> {{ movie.title }}</h5>
       </p>
       <p class="film">
-        <router-link :to="'/movie/'+ movie.id">
+        <router-link :to="'/movie/'+ movie.id + '?uid=' + userId">
         <img
           :src="'https://image.tmdb.org/t/p/original/' + movie.poster_path"
           withd="100"
@@ -64,6 +64,7 @@ export default {
       moviename: "",
       movies: [],
       moviesLoadingError: "",
+      userId: "",
     };
   },
   methods: {
@@ -97,6 +98,7 @@ export default {
     },
   },
   created() {
+    this.userId = this.$route.query.uid;
     this.fetchMovies();
     this.fetchGenres();
   },