1. lazy-loaded
일반적으로 router는 router될 때 모든 view관련 component를 가지고 있는다. 그 중에서 선택된 화면을 빼서 보여주는데 이러면 서비스시간에 문제가 될 수 도있다.
이를 방지하기 위해서 lazy-loaded를 이용한다
lazy-loaded : 어떤 값이 입력되었을 때 이 값에 해당하는 내용만 불러온다
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: "about" */ "./views/Users.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
},
{
lazy-loaded부분
path: '/about',
name: 'about-name',
// lazy-loaded : 어떤값이 입력되었을 떄 이 값에 해당하는 내용만 불러온다
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: About
},
{
lazy-loaded부분
//user뒤에 넘어오는 id 파라미터를 알고싶다면 users/:id 해준다
path: '/users/:userId',
name: 'users',
// lazy-loaded : 어떤값이 입력되었을 떄 이 값에 해당하는 내용만 불러온다
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: Users
}
]
})
JavaScript
복사
2. [ History ]
History mode란?
기본 default 설정은 url창에 /#/이렇게 되지만
historyMode를 사용하게되면 우리가 기본적으로 아는 url주소창이 / 이렇게 된다
export default new Router({
/**
* history mode란 ?
* 만약에 지우면 /#/ 이렇게 됨
* 이를 제거하기위해 history mode를 해준다
*/
mode: 'history',
JavaScript
복사
3. [ router 접근하는 법 ]
router에 접근하기 위한 표시는 $router이다.
더 나아가 router를 주소창으로 바꾸고싶다면 router.push(name: 'router.js에서 선언한 name값'})
이 때 name: 은 :기호가 name에 띄어쓰면안되고 붙여 써야됨
router 객체에 저장되어있는 path, namer값 모두 되지만 name값을 사용하는게 편하다
<v-list-tile @click="$router.push({name: 'home'})" exact>
<v-list-tile-action>
<i class="fas fa-home"></i>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>Home</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
JavaScript
복사
3-1 [ router :to="{name : 'router.js에선언한 name값'})"
•
router.push(name: 'router.js에서 선언한 name값'})과 같은의미
3-2 [ router- link 를 이용한 페이지 이동 ]
<h1>클릭</h1>
<router-link :to="{name: 'home'}">
<h1>클릭1</h1>
</router-link>
JavaScript
복사
3-2 [ exact ]
•
router의 path값이 정확히 일치해야만 활성화 시키게해주는것
4. [ params ]
•
params를 선언한 방법은 여러가지가 있다
1.
먼저 router.js에 path뒤에 선언하는방법
path: '/users/:userId',
//user뒤에 넘어오는 id 파라미터를 알고싶다면 users/:id 해준다
JavaScript
복사
2.
router :to 뒤에 선언하는방법
<v-list-tile router :to="{
name: 'users',
params : {
userId: 4321,
name: 'hoza'
}
JavaScript
복사
param은 router.js에서 선언할 수 도있고 .vue 파일에서도 선언할 수 도 있다.
예를들어 위에서 선언한 params 값을 가져오고싶다면
param값을 가져오기 위한 방법은 $route.params.name, $route.params.userId 이다.
<template>
<div>
<h1>WelCome Users-Vue</h1>
<p>이 유저는 현재 유저번호가 {{userId}} 입니다. </p>
<p>{{$route.params.name}}</p>
</div>
</template>
<script>
export default {
computed : {
userId() {
return this.$route.params.userId
}
},
created() {
//router는 router.js에있는 모든 router들에 정보를 가지고있고
console.log('router', this.$router)
//route는 우리가 현재보고있는 주소에 정보를 가지고있다
console.log('route', this.$route)
}
}
</script>
JavaScript
복사
5. [ router vs route 차이 ]
•
router : router.js에있는 모든 router들에 정보를 가지고있다
•
route : 내가 현재보고 있는 주소에 정보를 가지고 있다.