url 분기
아래 화면과 같이 특정 상황에 따라 아래 화면에 알맞은 폼이 나타나고, url 또한 분기되어야 했습니다.
user.js 수정
이전구조
이전 구조에서는 /user 에서 전부 작업했으며, topframe 에만 컴포넌트를 등록하였습니다.
/user
+------------------+
| user |
| +--------------+ |
| | | |
| | | |
| +--------------+ |
| |
| +--------------+ |
| | | |
| | | |
| +--------------+ |
+------------------+
=================================================================================
변경구조
회원가입
/user 에서 회원가입에 해당하는 대답을 클릭하면 /user/signup 으로 이동하도록 하였습니다.
이때 변화하는 frame 은 아래부분입니다. 때문에 상단에는 영향이 가지 않습니다.
/user/signup
+------------------+ +-----------------+
| user | | user |
| +--------------+ | | +-------------+ |
| | | | +------------> | | | |
| | | | | | | |
| +--------------+ | | +-------------+ |
| | | |
| +--------------+ | | +-------------+ |
| | | | +------------> | | signup | |
| | | | | | | |
| +--------------+ | | +-------------+ |
+------------------+ +-----------------+
로그인
/user 에서 로그인에 해당하는 대답을 클릭하면 /user/login 으로 이동하도록 하였습니다.
이때 변화하는 frame 은 아래부분입니다. 때문에 상단에는 영향이 가지 않습니다.
/user/login
+------------------+ +-----------------+
| user | | user |
| +--------------+ | | +-------------+ |
| | | | +------------> | | | |
| | | | | | | |
| +--------------+ | | +-------------+ |
| | | |
| +--------------+ | | +-------------+ |
| | | | +------------> | | login | |
| | | | | | | |
| +--------------+ | | +-------------+ |
+------------------+ +-----------------+
Plain Text
복사
user.js
const userPages = [
{
path: '/user',
component: () => import('@/portal/frame/NintendoScreen'),
children: [
{
path: "signup",
component: () => import('@/portal/user/UserSignUpBottom'),
},
{
path: "login",
component: () => import('@/portal/user/UserLoginBottom'),
}
]
}
]
export { userPages }
JavaScript
복사
중첩된 라우트 이기 때문에 children 을 두었으며, 이에관한 내용은 공식문서를 참조해두었으니 공부하면 좋을 것 같습니다.
url 이동과 router-view
url 을 분기했으니, 해당 url 로 이동하도록 하는 무언가가 필요합니다. 따라서 UserMain.vue 를 아래와 같이 수정해주었습니다.
UserMain.vue
<router-link to=”이동하고자 하는 url”> 을 통해 url 을 이동할 수 있습니다.하지만 등록한 컴포넌트를 보이게 하려면 알맞은 곳에 <router-view> 를 넣어주어야 합니다.
현재 윗단에 알맞게 아랫단을 보여주어야 하므로, NintendoBottomFrame.vue 를 아래와 같이 작성해주었습니다.
NintendoBottomFrame.vue
이렇게 두면 url 에 해당하는 컴포넌트들이 이곳에 그려집니다.
