728x90
[목표]
router에서 설정하지 않은 경로로 진입했을 때의 처리를 알아보자
1. redirect 처리
2. 설정하지 않은 모든 URL을 NotFound.vue 파일 만들어서 보내주기
설정한 router path는 3개 밖에 없다.
만약 설정한 path 이외의 URL이 올 경우는 어떻게 처리될까?
이상한 URL로 들어갈 경우
아무것도 보이지 않는다.
이것을 처리해보자
router에 변수를 설정할 때 다음과 같이 쓴다.
:변수명
올바르지 않은 경로를 처리할 때도 변수명을 사용한다.
변수명은 아무거나 작성해도 된다.
뒤에 오는 정규식이 생소하게 느껴진다.
path에 변수명을 설정하고 그 변수명에는 어떤 것이든 올 수 있다는 뜻이다.
path: ':anything(.*)'
설정되지 않은 모든 경로에 대해
redirect 처리해주고 있다.
[main.js]
import { createApp } from 'vue';
import { createRouter, createWebHistory } from 'vue-router'
import TeamsList from './components/teams/TeamsList.vue';
import UsersList from './components/users/UsersList.vue';
import TeamMembers from './components/teams/TeamMembers.vue';
// import NotFound from './components/NotFound/NotFound.vue';
import App from './App.vue';
const app = createApp(App)
const router = createRouter({
history: createWebHistory(),
routes:[{
path: '/teams',
component: TeamsList,
},
{
path: '/users',
component: UsersList,
},
{
path: '/teams/:teamsId',
component: TeamMembers,
props: true,
},
{
path: '/:anythingyouwant(.*)',
redirect: '/teams'
},
],
linkActiveClass: '커스텀클래스명'
});
app.use(router);
app.mount('#app');
redirect 말고
잘못 들어왔다는 페이지를 보여주고 싶을 때는
component를 넣어주면 된다.
router 설정 외 경로 처리를
컴포넌트로 할 때
[main.js]
import { createApp } from 'vue';
import { createRouter, createWebHistory } from 'vue-router'
import TeamsList from './components/teams/TeamsList.vue';
import UsersList from './components/users/UsersList.vue';
import TeamMembers from './components/teams/TeamMembers.vue';
import NotFound from './components/NotFound/NotFound.vue';
import App from './App.vue';
const app = createApp(App)
const router = createRouter({
history: createWebHistory(),
routes:[{
path: '/teams',
component: TeamsList,
},
{
path: '/users',
component: UsersList,
},
{
path: '/teams/:teamsId',
component: TeamMembers,
props: true,
},
{
path: '/:anythingyouwant(.*)',
component: NotFound
},
],
linkActiveClass: '커스텀클래스명'
});
app.use(router);
app.mount('#app');
'데일리 공부 기록' 카테고리의 다른 글
hands on vue3 - 제공된 소스에서 라우터 children 예제 풀어보기 (0) | 2023.03.29 |
---|---|
hands on vue3 - vue3 & spring boot & Mysql로 restApi를 통해 조건에 맞는 값 가져오기(간단예제) (2) | 2023.03.29 |
hands on vue3 - router에서 url 쿼리스트링을 props로 받기 (0) | 2023.03.28 |
hands on vue3 - vue & spring-boot mysql로 연동하기(빠른 예제) (1) | 2023.03.27 |
hands on vue3 - vue3 & spring boot로 api 연동한 뒤 값 가져와보기(가장 쉬운 예제!) - 3편 api 불러와보기 (0) | 2023.03.25 |