vue-router 설치와 기본 라우팅 (url path 설정)

vue3 기준 router 설치

npm install vue-router@4

 

설정을 위해 router.js 를 만든다. (vue-router 만든 사람이 이렇게 쓰라고 했음)

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

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

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

export default router;

 

예를 든다면

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

 

후에 main.js 에 라우터를 임폴트 해준다.

import { createApp } from 'vue'
import App from './App.vue'
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'
import 라우터만든거 from './router.js';

createApp(App).use(라우터만든거).mount('#app')

 

이제 사용할 일만 남았는데

app.vue

<router-view :블로그글="블로그글">
  
</router-view>

로 넣고 /list 로 들어가면 해당 컴포넌트가 보이게 된다.

props 또한 이곳에 넣어 사용하면 된다.

 

이동시 에는

<router-link to="/">홈페이지</router-link>
<router-link to="/list">리스트페이지</router-link>

 

 

상세페이지를 만들 때에는

  {
    path: "/detail/:id",
    component: Detail,
  }

위의 문자로 사용할 수 있다.

 

저 :id 값은 어떻게 꺼내 쓸 수 있을까?

<template>
    {{$route.params.id}}
    <h5>상세페이지</h5>
    <p>글제목</p>
    <p>글 설명</p>
</template>

 

$route.params.id로 꺼내어 쓸 수 있다.

만약 :apple이라면 $route.params.apple이 될 것이다.

 

route 문법 몇가지를 소개하자면

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

숫자만 찾아주는 정규식 문법

 

  {
    path: "/detail/:id*",
    component: Detail,
  }

뒤에 *을 붙이면 /datail/id/id/id/id 가 와도 여기로 안내가 된다

 

  {
    path: "/",
    component: Home,
  },
  {
    path: "/list",
    component: List,
  },
  {
    path: "/detail/:id*",
    component: Detail,
  },
  {
    path: "/:anything(.*)",
    component: 404page,
  }

404를 만드는 방법은 /:anything이라는 걸로 없는 path는 모두 여기에 걸쳐진다

(.*)는 모든 타입들을 이곳으로 몰아넣기 위함이다. 위의 /list 등의 패스도 여기에 맞는 형식이지만

순서로 인해 이곳으로 들어오지 않는다