Commit @de44dd5d735d554640d9a49f91f3bce795afcaaa

woals 08-13

240813 권민수 홈 경로 진입 시 모든 메뉴 버튼 비활성화 로직 추가

@de44dd5d735d554640d9a49f91f3bce795afcaaa

bcd21ce

de44dd5

client/views/layout/Menu.vue

--- client/views/layout/Menu.vue

+++ client/views/layout/Menu.vue


   
   
   export default {
+    props: {
+      currentRoute: {
+        type: String,
+        required: true
+      }
+    },
     data() {
       return {
         activeButton: '',
       };
     },
     methods: {
+
       goToApp(button) {
         this.activeButton = button;
       },
+
+      // 홈 화면이면 모든 버튼을 비활성화
+      updateActiveButton() {
+        if (this.currentRoute === '/') {
+          this.activeButton = '';
+        }
+      }
+
+    },
+    watch: {
+      currentRoute() {
+        this.updateActiveButton();
+      }
     },
     mounted() {
+      this.updateActiveButton();
       console.log('Menu mounted');
     }
   };

bcd21ce

de44dd5

client/views/pages/main/Main.vue

--- client/views/pages/main/Main.vue

+++ client/views/pages/main/Main.vue


           <div class="flex justify-between" >
              <Side></Side>
              <div>
-                <Menu></Menu>
+                <Menu :currentRoute="$route.path"></Menu>
                 <div class="main-wrap">
                     <router-view />
                 </div>

bcd21ce

de44dd5

package-lock.json

--- package-lock.json

+++ package-lock.json


 {
-  "name": "lms_front-1",
+  "name": "lms_front",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {

Add a comment

Open 0
Closed 0

List

...	...	@@ -22,17 +22,38 @@
22	22
23	23
24	24	export default {
	25	+ props: {
	26	+ currentRoute: {
	27	+ type: String,
	28	+ required: true
	29	+ }
	30	+ },
25	31	data() {
26	32	return {
27	33	activeButton: '',
28	34	};
29	35	},
30	36	methods: {
	37	+
31	38	goToApp(button) {
32	39	this.activeButton = button;
33	40	},
	41	+
	42	+ // 홈 화면이면 모든 버튼을 비활성화
	43	+ updateActiveButton() {
	44	+ if (this.currentRoute === '/') {
	45	+ this.activeButton = '';
	46	+ }
	47	+ }
	48	+
	49	+ },
	50	+ watch: {
	51	+ currentRoute() {
	52	+ this.updateActiveButton();
	53	+ }
34	54	},
35	55	mounted() {
	56	+ this.updateActiveButton();
36	57	console.log('Menu mounted');
37	58	}
38	59	};

...	...	@@ -4,7 +4,7 @@
4	4	<div class="flex justify-between" >
5	5	<Side></Side>
6	6	<div>
7		- <Menu></Menu>
	7	+ <Menu :currentRoute="$route.path"></Menu>
8	8	<div class="main-wrap">
9	9	<router-view />
10	10	</div>

...	...	@@ -1,5 +1,5 @@
1	1	{
2		- "name": "lms_front-1",
	2	+ "name": "lms_front",
3	3	"lockfileVersion": 3,
4	4	"requires": true,
5	5	"packages": {

Delete comment