1. [ Children ]
웹 페이지를 작동시킬때 페이지에 하위페이지를 불러올 경우가 있을 것이다.
예를 들면 User페이지에서 User에 id를 검색하여 /user/id 페이지를 부르거나
id를 검색 한 후 정보수정페이지를 불러오는 경우가 있을 것이다. /user/id/edit
이럴 경우 우리는 children메소드를 통해 쉽게 구현 할 수 있다.
1-1. [ Children 작성방법 ]
•
작성방법은 기존 Routes만든거랑 같다
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
Vue.use(Router)
const About = ()=> {
return import(/* webpackChunkName: "about" */ "./views/About.vue")
}
const Users = () => {
return import(/* webpackChunkName: "users" */ "./views/Users.vue")
}
const UsersDetail = () => {
return import(/* webpackChunkName: "users-detail" */ "./views/UsersDetail.vue")
}
const UsersEdit = () => {
return import(/* webpackChunkName: "users-edit*/ "./views/UsersEdit.vue")
}
export default new Router({
// 라우터 가드 : 조건에 따라서 라우터를 열어줄거냐 말거냐 이런역할을 하는것
/**
* history mode란 ?
* 만약에 지우면 /#/ 이렇게 됨
* 이를 제거하기위해 history mode를 해준다
*/
mode: 'history',
base: process.env.BASE_URL,
routes: [
// routes는 객체형태로 각각의 router가 존재하며
//path : 주소 , path와 연결되는 component를 설정한다.
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about-name',
// lazy-loaded : 어떤값이 입력되었을 떄 이 값에 해당하는 내용만 불러온다
component: About
},
{
//user뒤에 넘어오는 id 파라미터를 알고싶다면 users/:id 해준다
path: '/users',
name: 'users',
// lazy-loaded : 어떤값이 입력되었을 떄 이 값에 해당하는 내용만 불러온다
// beforeEnter: (to, from, next) => {
// //라우터가 불러오기전에 여기있는 함수가 먼저실행하고 그 후 라우터가 동작하게 해줘
// //라우터 실행시키는 함수 to , from, next가 온다
// // to, from은 라우터가 어디서(from) 어디(to)로 이동하는지 알려준다면
// // next는 이 안에 있는 함수를 실행하고 라우터를 실제로 어디로 이동시킬지 결정하는 함수를 가지고있다.
// console.log('to:', to, 'from :', from)
// console.log('beforeEnter')
// next()
// },
component: Users,
//users페이지에서만 작동하는 하위페이지생성 하기위해서 chidren생성
children: [
{
path: ":id",
name: "users-detail",
component: UsersDetail,
},
{
path: ":id/edit",
name: 'users-edit',
component: UsersEdit
}
]
}
]
})
JavaScript
복사
2. [ Router - Guard ]
라우터 가드 : 조건에 따라서 라우터를 열어줄거냐 말거냐 이런역할을 하는것
2-1 [ Router - Guard 에 속한 Method ]
•
beforeRouteEnter
◦
라우터가 불러오기전에 여기 있는 함수가 먼저 실행하고 그 후 라우터가 동작하게 한다
◦
라우터를 실행시키는 함수 to,from,next가 온다
◦
to , from은 라우터가 어디서(from) 어디(to)로 이동하는 알려준다
◦
next는 이 안에 있는 함수를 실행하고 라우터를 실제로 어디로 이동시킬지 결정해준다
◦
beforeRouteEnter를 사용했다면 반드시 그 안에 next() 써 줘야한다
◦
beforeRouteEnter는 created 전에 작동한다
beforeRouteEnter (to, from, next) {
console.log('before Enter')
//next()를 해줘야 라우터가 그 뒤에 동작을 한다 잊지말자!
next()
},
JavaScript
복사
•
beforeRouteLeave
◦
라우터가 이 페이지를 떠나기 직전에 동작한다
◦
beforeRouteEnter와 동일하게 함수 to, from, next가 온다
◦
next()를 반드시 작성해줘야한다
◦
beforeRouteLeave는 destroyed 전에 작동한다
beforeRouteLeave (to, from, next) {
// 라우터가 이 페이지를 떠나가 직전에 동작한다
console.log('before Leave')
next()
},
JavaScript
복사
2.2 [ Guard 실행 순서 ]
•
beforeRouteEnter → created → beforeRouterLeave → destryoed
<template>
<v-layout
row wrap pt-5 text-xs-center
style="max-width:500px;margin: 0 auto;">
<v-flex xs12>
<h1>WelCome Users-Vue</h1>
<p>유저를 검색해주세요 .</p>
<!-- <p>이 유저는 현재 유저번호가 {{userId}} 입니다. </p>
<p>{{$route.params.name}}</p>
<h1>그룹 : {{$route.query.group}}</h1>
<h1>카테고리 : {{$route.query.category}}</h1>
<h1>이름 : {{$route.query.name}}</h1>
<h1>주소 : {{$route.query.address}}</h1> -->
</v-flex>
<v-flex xs12>
<v-text-field
v-model="userId"
label="유저번호를 입력하세요"
></v-text-field>
<v-btn @click="$router.push({name: 'users-detail',
params: {
id:userId
}
})">검색</v-btn>
</v-flex>
<v-flex xs12>
<router-view></router-view>
</v-flex>
</v-layout>
</template>
<script>
export default {
data() {
return {
userId: null
}
},
beforeRouteEnter (to, from, next) {
console.log('before Enter')
//next()를 해줘야 라우터가 그 뒤에 동작을 한다 잊지말자!
next()
},
beforeRouteLeave (to, from, next) {
// 라우터가 이 페이지를 떠나가 직전에 동작한다
console.log('before Leave')
next()
},
created() {
console.log('created')
},
destroyed() {
console.log('destroyed')
},
}
</script>
JavaScript
복사
