[뷰 라우터란]
- 페이지간 이동을 위한 라이브러리
- 페이지 이동 시 url변경, 변경된 요소의 영역 컴포넌트를 갱신한다.
router 설치
- vue3부터는 vue-router가 아닌 vue-router@next를 설치한다.
npm install vue-router@next
폴더 / 모듈 생성
src / router 폴더를 생성하고 폴더 안에 index.js로 라우터 모듈을 생성한다.
[폴더 구조]
├── router
│ └── index.js
├── App.vue
└── main.js
[router/ index.js 모듈]
import { createRouter, createWebHistory } from "vue-router";
import Home from "../views/Home.vue";
import About from "../views/About.vue";
const routes = [
{
path: "/",
name: "Home",
component: Home,
},
{
path: "/about",
name: "About",
component: About,
},
];
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes,
});
export default router;
[router 속성]
- path : 사용자가 연결될 실제 경로 (url path)
- name : route를 연결할 때 사용하는 이름
- component : 렌더링 할 컴포넌트를 지정
- (name 을 사용하여 routing 하는 것이 좀 더 유연하고 편리함)
라우터 모듈 가져오기
use(router)로 사용함을 표기
//main.js
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
createApp(App).use(router).mount("#app");
동적 라우팅 / 중첩 경로 다루기
[라우터 영역 지정]
* router-link
- 라우터에서 페이지 이동을 위한 태그
- router-link to 속성: path 뿐 아니라 name을 사용하여 라우팅 할 수 있다.
- name을 활용하면 각 컴포넌트들의 수정이 필요 없어지기에 유연한 활용이 가능하다.
* router-view: 페이지의 url이 이동했을 시 그 범위내에서 뿌려주는 태그
<div id="app">
<div>
<router-link to="/login">로그인</router-link>
<router-link to="/main">메인</router-link>
<!-- <router-link to="/about">about</router-link> -->
<router-link :to="{ name: 'About' }">about</router-link>
</div>
<router-view />
</div>
[params 사용하기]
//raoute/ index.js
const routes = [
{
path: "/",
name: "Home",
component: Home,
},
{
path: "/about",
name: "About",
component: About,
},
{
path: "/jobs",
name: "Jobs",
component: Jobs,
},
{
path: "/jobs/:id",
name: "JobDetails",
component: JobDetails
},
];
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes,
});
export default router;동적 라우팅을 위해서 중첩되는 페이지에 params를 :(콜론) 기호로 표시해준다.
//Jobs.vue
<template>
<div v-for="job in jobs" :key="job.id">
<router-link :to="{ name: 'JobDetails', params: { id: job.id } }">
<h2>{{ job.title }}</h2>
</router-link>
</div>
</template>
<script>
export default {
data() {
return {
jobs: [
{ id: 1, title: "ux designer", detail: "lorem" },
{ id: 2, title: "developer", detail: "lorem" },
{ id: 3, title: "vue developer", detail: "lorem" },
],
};
},
};
</script>router-link 안에는 params로 전달해줄 id값을 사용한다.
//JobDetails.vue
<template>
<h1>job details</h1>
<p>the job id is {{ $route.params.id }}</p>
</template>
<script>
export default {
data() {
return {
id: this.$route.params.id,
};
},
};
</script>$route.params.사용할 이름
여기서 사용할 이름은 path와 동일해야한다.
route/index.js에서 router를 생성할 때 path명에 /job/:id 라고 되어있다.
사용할 이름이 id로 되어 있기 때문에 router.params.id라고 똑같이 해줘야 한다.
[params props로 받기]
//Jobs.vue
<template>
<div v-for="job in jobs" :key="job.id">
<router-link :to="{ name: 'JobDetails', params: { id: job.id } >
<h2>{{ job.title }}</h2></router-link>
</div>
</template>params를 props로 전달할 수 있다.
//router/index.js
const routes = [
...
{
path: "/jobs/:id",
name: "JobDetails",
component: JobDetails,
props: true,
},
];
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes,
});
export default router;router를 생성할 때 props를 true로 설정해줘야 한다.
props가 true일 경우 모든 경로를 props로 받아 매개변수로 사용할 수 있다.
( Jobs.vue에 prams를 통해 props를 전달. )
//JobDetails.vue
<template>
<h1>job details</h1>
<p>the job id is {{ id }}</p>
<!-- <p>the job id is {{ $route.params.id }}</p>-->
</template>
<script>
export default {
props: ["id"],
// data() {
// return {
// id: this.$route.params.id,
// };
// },
};
</script>props를 전달받는 자식 컴포넌트에서도 props로 id를 받게되면
{{ $router.params.이름 }}의 data를 별도로 지정하고 사용하지 않아도 된다.
Redirects
리디렉션의 경우 router에서 path와 redirect를 설정해주면 된다.
const routes = [
...
{
path: "/all-jobs",
redirect: "jobs",
},
];
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes,
});
export default router;
Error pages control
경로가 없는 페이지에 왔을 경우 404 에러 표시를 해주자.
마찬가지로 router에서 경로 객체를 설정 해줘야한다.
//router/ index.js
import { createRouter, createWebHistory } from "vue-router";
import Home from "../views/Home.vue";
import About from "../views/About.vue";
import Jobs from "../views/Jobs/Jobs.vue";
import JobDetails from "../views/Jobs/JobDetails.vue";
import NotFoundPage from "../views/Jobs/NotFoundPage.vue";
const routes = [
...
// redirect
{
path: "/all-jobs",
redirect: "jobs",
},
// catchall 404
{
path: "/:catchAll(.*)",
// 함수로 보이지만 정규식 패턴임
name: "NotFoundPage",
component: NotFoundPage,
},
];
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes,
});
export default router;
잡히지 않는 모든 경로를 포함한다는 정규식과 함께 catchall 객체를 설정해준다.
Programmatic navigation
[this.$router.go]
라우터를 사용해 컴포넌트를 이동(교체)할 때 마다 스택이 쌓인다.
히스토리 모드의 특징 중 하나는 메소드를 사용해서 앞, 뒤로가기를 구현할 수 있다.
1. this$router.go : 히스토리 스택의 연산을 이용해서 이전에 해당하는 컴포넌트로 렌더링을 해준다.
2. this$router.push: 네비게이션 기능을 해준다.
this$router.push({name: "Home"})는 router-link to ="/home"의 기능과 같다.
* 주의사항 *
$router와 $route를 햇갈리지 말 것
<template>
<h1>router연습</h1>
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link :to="{ name: 'About' }">about</router-link> |
<router-link :to="{ name: 'Jobs' }">Jobs</router-link>
</div>
<button @click="redirect">Redirect</button>
<button @click="back">Go back</button>
<button @click="forward">Go forward</button><Br />
<router-view />
</template>
<script>
export default {
methods: {
redirect() {
this.$router.push({ name: "Home" });
},
back() {
this.$router.go(-1);
},
forward() {
this.$router.go(+1);
},
},
};
</script>
[createWebHistory]
hash mode는 createWebHashHistory()가 생성됐었다.
hash모드로 동작할 경우 url에 아래와 같이 # 이 붙는다.
http://localhost:9090/#/user
해쉬 모드는 url섹션이 서버로 전송되지 않지만 SEO에서 영향을 미치기에 html5에서는 createWebHistory()가 생성되고 권장되는 모드라고 한다.
현재 내가 사용중인 router/index.js안에서는 history가 BASE_URL로 설정이 되어 있다.
위에서 errorpage 컨트롤시 router에 객체를 따로 생성을 해줬었는데, histroy mode에서도 직접 설정이 가능하다.
import { createWebHistory, createRouter } from "vue-router";
import ErrorPage from "@/components/ErrorPage"
import Home from "@/components/Home"
const router = createRouter({
history : createWebHistory(),
routes : [
{
path : "/",
name : "home",
component : Home
},
{
path : "/:pathMatch(.*)",
name : "not-found",
component : ErrorPage
}
]
});
export default router;
히스토리 모드에 대한 부분은 따로 게시글로 정리해봐야겠다.
https://router.vuejs.org/guide/essentials/navigation.html#traverse-history
Programmatic Navigation | Vue Router
Programmatic Navigation Aside from using to create anchor tags for declarative navigation, we can do this programmatically using the router's instance methods. Navigate to a different location Note: Inside of a Vue instance, you have access to the router i
router.vuejs.org
댓글