본문 바로가기

데일리 공부 기록

hands on vue3 - router에서 설정되지 않은 URL 처리 & redirect 설정

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');