vue js 기본 // 라우터

# 설치

npm install vue-router@4

 

 

# ./src/main.js에서 라우터 선언

import { createApp } from 'vue'
import App from './App.vue'
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'
import router from './router.js'


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

 

 

 

# ./router.js파일만들고 내용 넣기

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

const routes = [
  {
    path: "/list",
    component: List,
  },
  {
    path: "/",
    component: Main,
  },
  {
    path: "/detail/:index",
    component: Detail,
  },
  {
    path: "/:anything(.*)",
    component: Fail,
  }
];

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

export default router;

 

 

 

 

# ./src/component디렉토리에 콤포넌트를 하나 만들고 임포트를 해줘야함.

컴포넌트는 대충만들어도됨. 기본만. fail을 예로듬.

<template>

<div>fail~~~</div>
<h1>실패야~~</h1>
</template>

<script>
export default {
}
</script>

<style>
</style>

 

 

# 아까 만든 router.js파일안에 어레이에서 어떤 rest api에 어떤 컴포넌트를 보여줄껀지 씀.

  {
    path: "/list",
    component: List,
  },

/list로 접속하면 컴포넌트 List를 보여줄거야.

 

 

# App.vue에서 router을 사용하려면

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

이렇게 원하는데에 보여줄수 있음.

posts라는 데이터를 프롭스로 보내줬음.

 

 

 

각각 컴포넌트에서 당연히

export default {
    name : 'Detail',
    props : {
        posts : Array,
    }
}

 

이렇게 프롭스 받은걸 쓴다고 선언해줘야함.

 

 

 

 

 

 

## 2 라우터 파라미터

  {

    path: "/detail/:index",

    component: Detail,

  },

아까 router.js에서 :index로 파라미터 정해줌.

 

그럼 컴포넌트에서

<p>{{posts[$route.params.index].date}}</p>

이렇게 파라미터 값을 가져옴..

 

 

++ list에서 링크로 for반복문 인덱스 보내주려했는데 안됨 ㅠㅠ

        <router-link to="/detail/{{index}}">{{a.title}}</router-link>

이렇게 하니까 안됨.. 그냥 index로 붙여도 안되고.. detail/1, detail/2이렇게 연결되도록 해줄순 없나..?

백틱쓰고 다 해도안됨 ㅡㅡ 

 

        <h5 v-on:click="$router.push(`/detail/${index}`)">{{a.title}}</h5>

이렇게 쓰거나

        <router-link :to="`/detail/${index}`">{{a.title}}</router-link>

이렇게 콤마붙여주거나 해서 하면됨.

 

 

추가로 fail페이지 만들기

  {

    path: "/:anything(.*)",

    component: Fail,

  }

암거나 치는데 없는 url이면 Fail컴포넌트를 보여준다.

참고로 이건 router.js에 제일아래에 해줘야함.

왜냐면 맨위에 쓰면 있는 라우터도 다 fail로 연결됨.