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

[목표]

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