Vue-Router(2)

키워드
lazy-loaded
history
$router.push
router :to
router
$route.params.name
진행일시
2021/10/11
이메일
조사자

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 : 내가 현재보고 있는 주소에 정보를 가지고 있다.