.gif&blockId=11b00c82-b138-8050-a58b-dcbceda2ef8f)
router/index.ts
서버에서 바로 불러오는 애들 → App.js에서 바로 가져온다.
{
path: '/',
name: 'home',
component: HomeView
},
JavaScript
복사
메뉴로 바로 불러와야한다, 사이즈가 커서 미리 불러와야 할것 같다. → webpackPrefetch:true로 설정
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(
/* webpackChunkName: "about", webpackPrefetch:true */ '../views/AboutView.vue')
}
JavaScript
복사
들어갈 빈도가 적거나, 사이즈가 작다 → webpack 제거
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(
/* webpackChunkName: "about" */ '../views/AboutView.vue')
}
JavaScript
복사
Router, Route
Router : 어디로 이동하는 것
Route : 현재 상태를 읽어오는 것
RouterLink
페이지를 리로딩하지 않고 URL에 매핑된 페이지를 렌더링 한다.
<RouterLink to="/about">About</RouterLink>
// active-class
<RouterLink active-class="active" to="/about">About</RouterLink>
HTML
복사
현재 경로, 경로 이름 알아내기
<template>
<ul>
<li>$route.name: {{ $route.name }}</li>
<li>$route.path: {{ $route.path }}</li>
</ul>
</template>
HTML
복사
useRouter, useRoute
useRouter : 라우터 인스턴스로 javascript에서 다른 페이지로 이동 가능
useRoute : 현재 활성 라우트 정보에 접근 가능. (읽기 전용-readonly)
<script setup>
import { useRoute, useRouter } from 'vue-router';
const router = useRouter();
const route = useRoute();
console.log('route.name: ', route.name);
console.log('route.path: ', route.path);
const goAboutPage = () => router.push('/about');
</script>
<template>
<h1>Home Page</h1>
<button @click="goAboutPage">About 페이지로 이동</button>
</template>
HTML
복사
동적 라우팅 - params
const routes = [
{
path: '/posts/:id',
component: PostDetailView,
},
{
path: '/posts/:id/edit',
component: PostEditView,
},
];
const router = createRouter({
history: createWebHistory('/'),
routes,
});
JavaScript
복사
<div>User {{ $route.params.id }}</div>'
JavaScript
복사
경로 메타 필드
•
임의의 정보(예: 누가 경로에 접근 가능한지, 트랜지션 이름 등)를 추가하면, 경로 위치 및 탐색 가드에서 접근 가능
const routes = [
{
path: '/posts',
component: PostsLayout,
children: [
{
path: 'new',
component: PostsNew,
// 유저 인증 필수
meta: { requiresAuth: true },
},
{
path: ':id',
component: PostsDetail,
// 유저 인증 없어도 됨
meta: { requiresAuth: false },
},
],
},
]
JavaScript
복사
•
meta 필드 접근 방법
router.beforeEach((to, from) => {
// to.matched.some(record => record.meta.requiresAuth)와 같이
// 모든 경로 레코드를 확인하는 대신, `to.meta.requiresAuth`처럼 바로 접근 가능
if (to.meta.requiresAuth && !auth.isLoggedIn()) {
// 이 경로는 인증이 필수이므로, 로그인 여부를 확인하고,
// 만약 인증되지 않았다면 로그인 페이지로 리디렉션
return {
path: '/login',
// 나중에 다시 올 수 있도록, 방문한 위치를 저장
query: { redirect: to.fullPath },
}
}
})
JavaScript
복사
•
ts 메타 필드 입력
// `router.ts`와 같은 `.ts` 파일에 직접 추가할 수 있습니다.
// `.d.ts` 파일에 추가할 수도 있습니다.
// 프로젝트의 tsconfig.json "파일"에 포함되어 있는지 확인하십시오.
import 'vue-router'
// 모듈로 처리되도록 하려면 `export` 문을 하나 이상 추가하세요.
export {}
declare module 'vue-router' {
interface RouteMeta {
// 선택적
isAdmin?: boolean
// 모든 경로에서 선언해야 함
requiresAuth: boolean
}
}
TypeScript
복사
