[Vue] vue-router

JeongChaeJin·2022년 7월 26일
0

VuejsStudy

목록 보기
12/19

Library Settings

npm install vue-router@4
  • vue3 버전과 호환되는 라우터
import { createApp } from 'vue'
import App from './App.vue'
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'
import my_router from "./router"

createApp(App).use(my_router).mount('#app')
  • main.js
  • import를 하기위한 my_router 작성이 필요하다.
import { createWebHistory, createRouter } from "vue-router";
import List from './components/ListPage'

const routes = [
  {
    path: "/list",
    component: List,
  }
];

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

export default router; 
  • 라우터 라이브러리 만든 사람이 만들어놓은 form이다.
  • createRouter : 라우터 생성 함수
  <div class="container mt-4">
    <h5>React blog</h5>
    <p>- Vue -</p>
  </div>

  <router-view :blog_contents="blog_contents"></router-view>
  • component 대신에 router-view로 지정해서 보여줄 수 도 있다.
  • props는 여기다 그대로 하면된다. 이전에 <ListPage> 한 것과 마찬가지가 된 것이다.
  • 즉, 페이지를 나누고 싶을 때는 routes만 건들어주면 된다는 것이다 !
    • 페이지로 나누고 싶으면 우선 컴포넌트를 만든다.
  • router-link to="/ 사용하면, 해당 페이지로 이동하는 기능 만들 수 있다.
  <router-link to="/">HomePage</router-link>
  <router-link to="/list">ListPage</router-link>

  • 각 컴포넌트를 눌르면 router link로 이동하게 된다.

  • 여기에 응용할 수 있다는 뜻 !

URL Parameter

import Detail from './components/DetailPage'

const routes = [
  {
    path: "/list",
    component: List,
  },
  {
    path: "/",
    component: Home,
  },
  {
    path: "/detail/:id",
    component: Detail,
  }
];
  • 이런식으로 /:param 을 넣으면 파라미터로 사용 가능하다. 이어서 써서 여러개줄 수 도 있다.

  <div>
    <h4>상세 페이지</h4>
    <h5>{{blog_contents[$route.params.id].title}}</h5>
    <p>{{blog_contents[$route.params.id].content}}</p>
  </div>
  • html에서는 이렇게 $route.params로 받으면된다.
    • 물론 props로 데이터를 지정해놨어야된다.
  {
    path: "/detail/:id(\\d+)",
    component: Detail,
  }
  • router에서는 정규식을 넣어서 파라미터를 업그레이드할 수 있다.

  • 같은 route에 걸리면 맨 위의 라우트 주소 우선순위이므로 순서에 유의하자.

Netsted routes

const routes = [
  {
    path: "/list",
    component: List,
  },
  {
    path: "/",
    component: Home,
  },
  {
    path: "/detail/:id(\\d+)",
    component: Detail,
    children: [
      {
        path: "author",
        component: Author
      },
      {
        path: "comment",
        component: Comment
      }
    ]
  }
];
  • children을 지정해서 /detail/id/author or comment를 지정하면서 자식 url을 정의할 수 도 있다.
<template>
  <div>
    <p>{{$route.params.id}}</p>
    <h4>상세 페이지</h4>
    <h5>{{blog_contents[$route.params.id].title}}</h5>
    <p>{{blog_contents[$route.params.id].content}}</p>
    <router-view></router-view>
  </div>
</template>
  • 보여주기 위해서는 해당 router를 정의한 컴포넌트 DetailPage.vue 에 어디에 보여줄지를 router-view를 통해 지정해준다.

  • 특정 페이지안에서 route를 나누고 싶을 때 nested routes를 쓰면 된다.
<h5 @click="$router.push('/detail/0')">{{content.title}}</h5>
  • router - link가 쓰기 어렵다면, @click 에서 router 관련 함수인 push로 해당 url로 보내줄 수 도 있다 !
  • $router.go(-2)"
    • 이런식으로 뒤로가기도 가능하다.

Named Views

  • 여러개 컴포넌트를 보여줄 때 사용한다.
profile
OnePunchLotto

0개의 댓글

Powered by GraphCDN, the GraphQL CDN