뷰 라우터 / Vue.js router params 이동

1. node.js를 이용해 뷰 라우터를 깔아주자!

npm install vue-router@4

설치된 뷰버전이 Vue 3 이기 때문에 라우터 라이브러리도 4버전을 설치해주자 

 

 

2. router.js 생성 

src 파일안에  router.js 파일을 생성을 해서 라우터를 사용할 준비를 하자.

import { createWebHistory, createRouter } from "vue-router";

const routes = [
  {
    path: "/경로",
    component: import해온 컴포넌트,
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

기본 셋팅이다.  뷰 라우터를 만든 개발자가 정한 라우터 사용법 기본.

 

import { createWebHistory, createRouter } from "vue-router";
import Rooms from './components/Rooms.vue'
import Main from './components/main.vue'
import Detail from './components/Detail.vue'

const routes = [
  {
    path: "/list",
    component: Rooms,
  },
  {
    path: "/",
    component: Main
  },
  {
    path: "/detail/:id(\\d+)",
    component: Detail
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

셋팅된 모습,

3개의 컴포넌트를 라우터를 통해서 보여주고 싶기때문에 import를 통해 불러 와주고 각각 라우터 이동 경로(path), 컴포넌트 작명을 해준다.

 

 path: "/detail/:id(\\d+)",
    component: Detail

path 에  /:작명 을 해주면  /detail/1  ,  /detail/2 ,  /detail/3 ・・・・・ /detail/20000 등 부가 페이지를 수 없이 만들수 있는 준비가 된다.

 

(//d+)는 id에 숫자만 들어갈 수 있도록 해주는 고마운 정규식 이라고 한다.

 

---

 

router.js 에 이렇게 경로 설정을 해준다능에는 main.js에 router-link 라이브러리를 사용할 거에요 라고 말해줘야 한다.

 

import { createApp } from 'vue'
import App from './App.vue'
import router from './router.js'

createApp(App).use(router).mount('#app')

router.js를 main.js 에 보내주고(import) createApp()과 mount() 사이에  라우터 사용할거에요 라고 .use(router)를 입력한다.

 

이제 라우터를 보여줄 영역에 사용하기만 하면 된다!

 

 

 

 

App.vue (최상위 컴포넌트)

<template>
 <div>
    <nav>
      <ul>
        <router-link to="/"><li>Main</li></router-link>
        <router-link to="/list"><li>List</li></router-link>
        <!-- 라우터 이동 -->
      </ul>
  </nav>
  <main>
    

    <router-view :data="data"></router-view>
    <!-- 라우팅 된 컴포넌트가 보여질곳 / 데이터 보내주기 -->
  </main>
 </div>
</template>

<script>
import data from "./data/data01.js"
// 데이터 불러오기  작명 from "./데이터 위치"

export default {
  name: 'App',
  components: {

  },
  data() {
    return {
      data : data,
      //작명 : import한 데이터
    }
  },
  methods: {
    
  },
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

* {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}
a {
  text-decoration: none;
  color: #333;
}

nav ul {
  display: flex;
  justify-content: center;
}

nav ul li {
  padding: 0 50px;
}

main > div {
  padding: 50px 0;
}

main > h1 {
  padding-top: 50px;
}
</style>

 

원하는 위치에

    <router-view :data="data"></router-view>

<router-view></router-view> 를 입력해준다. 

 

라우터로 보여줄 컴포넌트에게 데이터를 전달해주기 위에 :data="data" 라고 보내준다!

 

컴포넌트 들에서는 

 <script>
export default {
    name: 'Rooms',
    data() {
        return {
            
        }
    },
    props: {
        data : String,
    },
    created() {
    },
}
</script>

<style>
    h5 {
        padding: 10px;
    }
</style>

이런식으로 props: {} 를 작성하고 데이터를 받아준다!

 

그런 다음 a링크에 해당하는 <router-link></router-link>를 작성해서 라우터를  작동한다!

 

여기서 <router-link :to="router.js에서 정의한 컴포넌트들의 path 기입"> 한다.

 

 

ex)

  <router-link to="/list"><li>List</li></router-link>

//List를 누르면 /list 로 이동 해주세염!! 

 

 

이제 문제는 router.js에서 패스에 /:id 를 이용해서 파라미터를 만들어 논게 문제!!

 

이런 경우는 컴포넌트에서 부터 다르게 해줘야 한다.

 

detai.vue

<template>
  <div>
      <h2>{{data[$route.params.id].title}}</h2>
      <p>{{data[$route.params.id].content}}</p>
      <small>{{data[$route.params.id].date}}</small>
  </div>
</template>

<script>
export default {
    name: 'Detail',
    props: {
        data : String
    },
    data(){
        return {
            
        }
    }
}
</script>

<style>

</style>

Rooms.vue

<template>
   <div>
        <div v-for="(a, i) in data" :key="i">
      <router-link :to="{ path: '/detail/' + i }"><h5>{{data[i].title}} 라우터 링크를 이용함</h5></router-link>
      <h5 @click="$router.push('/detail/' + i)">{{data[i].title}} @click을 이용함</h5>
      <p>{{data[i].date}}</p>
    </div>
   </div>
</template>

<script>
export default {
    name: 'Rooms',
    data() {
        return {
            
        }
    },
    props: {
        data : String,
    },
    created() {
    },
}
</script>

<style>
    h5 {
        padding: 10px;
    }
</style>

원래 기존  /detail 로 이동하기만 한다면 

 

Detail.vue 파일안 변수 넣는 곳에 {{data[i].title}} 이런식으로 하지만 난  Rooms.vue 에 글 0번째 리스트를 누르면  0번째 리스트의 디테일을 보여주고 싶기 때문에  {{data[$route.params.id].title}} 이라고 [i] 대신 넣어준다.

 

Rooms.vue 에 있는 라우터 링크에도 파라미터 값을 지정해줘야 하기때문에 !

 

  <router-link to={path : "/deail/" + i }><li>List</li></router-link> 로 to에 {}로 치고 {path: "/지정한 path/" + i } 이런 식으로 넣어 준다.

 

 

---

라우터를 보내주는 역활은 

<router-link> 를 이용해도 되지만 @Click 를 이용해서도 가능하다!

 

<router-link :to="{ path: '/detail/' + i }"><h5>{{data[i].title}} 라우터 링크를 이용함</h5></router-link>
<h5 @click="$router.push('/detail/' + i)">{{data[i].title}} @click을 이용함</h5>

라우터 링크는 h5를 감싸고 라우터 링크에 :to = "path" 이런식으로 적지만 

@click 은 h5 태그에 @click="$router.push("/path")" 이런식으로 해준다! 

둘다 되는거 보니 취향 차이인거 같다.

 

다만 @click을 이용하면 push 대신 go  등 다른 값을 넣어 페이지 이동을 작동 시킬 수 있다.

이거에 대해서는 나중에 따로 글을 적을 수도 아닐 수도 있다. 

 

 

대충 결과

$route.params.id