update

 module.exports = {
 module.exports = {
-  root: true,
+  root: false,
   env: {
   env: {
     node: true
     node: true
   },
   },

 <template>
 <template>
 	<div>
 	<div>
-		<home></home>
+		<router-view></router-view>
 	</div>
 	</div>
 </template>
 </template>
 
 
 <script>
 <script>
-import home from './views/home';
-export default {
-	components: {
-		home,
-	},
-};
+export default {};
 </script>
 </script>
 
 
 <style></style>
 <style></style>

@@ -9,10 +9,14 @@ const routes = [
 		name: 'Home',
 		name: 'Home',
 		component: () => import('../views/home'),
 		component: () => import('../views/home'),
 	},
 	},
+	{
+		path: '/search/:id',
+		component: () => import('../views/search'),
+	},
 ];
 ];
 
 
 const router = new VueRouter({
 const router = new VueRouter({
-	mode: 'history',
+	mode: 'hash',
 	base: process.env.BASE_URL,
 	base: process.env.BASE_URL,
 	routes,
 	routes,
 });
 });

@@ -42,7 +42,7 @@
 </template>
 </template>
 
 
 <script>
 <script>
-import { mainData, searchUser, spectatorData, matchData } from '../api/index';
+import mainData from '../api/index';
 export default {
 export default {
 	data() {
 	data() {
 		return {
 		return {
@@ -54,21 +54,7 @@ export default {
 	},
 	},
 	methods: {
 	methods: {
 		async searchUser() {
 		async searchUser() {
-			try {
-				const userId = this.search;
-				const response = await searchUser(userId);
-				console.log(response.data);
-				if (response.status == 200) {
-					const response2 = await spectatorData(userId);
-					console.log(response2.data);
-					const response3 = await matchData(userId);
-					console.log(response3.data);
-					this.$store.commit('setSpecTator', response2.data);
-					this.$store.commit('setMatchData', response3.data);
-				}
-			} catch (error) {
-				console.log('에러');
-			}
+			this.$router.push('/search/' + this.search);
 		},
 		},
 		async fetchdata() {
 		async fetchdata() {
 			try {
 			try {

+<template>
+	<div class="container">
+		<div class="center">
+			<img
+				src="../../public/lolinfologo.png"
+				alt="logo"
+				width="300,"
+				height="300"
+			/>
+		</div>
+		<div class="center2">
+			<form>
+				<input type="text" v-model="search" placeholder="Search" autofocus />
+				<button v-show="search.length" @click.prevent="searchUser">
+					Search
+				</button>
+			</form>
+		</div>
+		<div id="nav">
+			<ul class="lot">
+				밴
+				<li
+					v-for="(item, index) in this.$store.getters.lotationChampList"
+					:key="index"
+				>
+					<img :src="item" alt="챔피언" width="50," height="50" />
+				</li>
+			</ul>
+		</div>
+		<div>
+			<ul>
+				초보자 추천 리스트
+				<li
+					v-for="(item, index) in this.$store.getters.begChampList"
+					:key="index"
+				>
+					<img :src="item" alt="" width="50," height="50" />
+				</li>
+			</ul>
+		</div>
+	</div>
+</template>
+
+<script>
+import { mainData, searchUser, spectatorData, matchData } from '../api/index';
+export default {
+	data() {
+		return {
+			search: '',
+		};
+	},
+	created() {
+		this.fetchdata();
+	},
+	methods: {
+		async searchUser() {
+			this.$router.push('/search/' + this.search);
+		},
+		async fetchdata() {
+			try {
+				const response = await mainData();
+				this.$store.commit('setlotationChamp', response.data.c_rotation);
+				this.$store.commit('setbegChamp', response.data.c_rotation_newbie);
+				console.log(response.data);
+			} catch (error) {
+				console.log('에러');
+			}
+
+			try {
+				const userId = this.$route.params.id;
+				const response = await searchUser(userId);
+				console.log(response.data);
+				if (response.status == 200) {
+					const response2 = await spectatorData(userId);
+					console.log(response2.data);
+					const response3 = await matchData(userId);
+					console.log(response3.data);
+					this.$store.commit('setSpecTator', response2.data);
+					this.$store.commit('setMatchData', response3.data);
+				}
+			} catch (error) {
+				console.log('에러');
+			}
+		},
+	},
+};
+</script>
+
+<style scoped>
+.center {
+	width: 100vw;
+	height: 50vh;
+	font-weight: bolder;
+	display: flex;
+	align-items: center;
+	justify-content: space-around;
+}
+.center2 {
+	width: 100vw;
+	height: 2vh;
+	display: flex;
+	align-items: center;
+	justify-content: space-around;
+}
+.lot {
+	float: left;
+}
+</style>