router 설정

Router

라우터 구성

1. 라이브러리 설치

> npm i vue-router --save

(TIP!!) package.json

  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-router": "^3.5.2"
  },

• 웹을 실행시키는데 필요한 비즈니스 로직 또는 앱의 동작을 담당한다.
• 배포할때도 포함해야하는 라이브러리

2. vue 설정

   import Vue from 'vue'
   import App from './App.vue'
   import VueRouter from 'vue-router';
   Vue.config.productionTip = false
   
   Vue.use(VueRouter);
   
   const router = new VueRouter({
     routes : [
           ..
     ]
   })
   new Vue({
     render: h => h(App),
     router,
   }).$mount('#app')
   

요래 생성할 수 있지만 정보가 많아졌을때 main.js 가 router 편향적인 설정파일이 될 수 있다.main.js는 기본적으로 애플리케이션의 플러그인 라이브러리 등 구조를 파악할 수 있는 것들이 다 들어있음

>> main.js

3. src/router/index.js 만들기

   import Vue from 'vue'
   import VueRouter from 'vue-router';
   
   

Vue.use(VueRouter);

const router = new VueRouter({
  routes : [
        {
            // url 주소
            path: '/',
            // url 주소로 갔을 때 표시될 컴포넌트
            component: '',
        },
        {
            path: '',
            component: '',
        },
        {
            path: '',
            component: '',
        },
  ]
})
```

Vue.use(VueRouter)`

vue.use 는 플러그인을 실행,초기화 하기위해서 필요한 코드

** src 밑에 views라는 폴더를 만들어 각각 이동하는 페이지 역할을 하는 컴포넌트 구성하기

vetur 플러그인 설치하면 vue 까지 입력하면 자동으로 틀이 생김

import {} from '../'

import Vue from 'vue'
import VueRouter from 'vue-router';
import NewsView from '../views/NewsView.vue'
import AskView from '../views/AskView.vue'
import JobsView from '../views/JobsView.vue'

Vue.use(VueRouter);

const router = new VueRouter({
  routes : [
        {
            // url 주소
            path: '/news',
            // url 주소로 갔을 때 표시될 컴포넌트
            component: NewsView,
        },
        {
            path: '/ask',
            component: AskView,
        },
        {
            path: '/jobs',
            component: JobsView,
        },
  ]
})

추가 완료

4. main.js 로보내기

   라우터 폴더에서 main.js로 라우터를 넘겨줘야한다.

   es6의 import , export 를 쓴다.

   router/index.js에

export const router = new VueRouter({ ....

보내주면

main.js에서 가져올 수있음

import Vue from 'vue'  
import App from './App.vue'  
import { router } from './router/index.js'; // 여기  
Vue.config.productionTip = false

new Vue({  
render: h => h(App),  
router //여기  
}).$mount('#app')

이렇게도 할 수 있음

export default new VueRouter();

export: 라우터 인스턴스가 생성되면서 파일이 밖으로 나가게됨

default : 하나의 파일 변수가 나가게된다.

export default new VueRouter({  
routes:\[\], //페이지 정보, 라우팅 정보를 담고 있다.  
});

   routes:[
       {
           path: '/login',
           component: LoginPage, //이동했을때 페이지 컴포넌트
       },
       {
           path: '/signup',
           component: SignupPage, 
       }
   ],

5. App.vue

   <template>
     <div id="app">
       <router-view></router-view>
     </div>
   </template>

<router-view></router-view>는 url이 ask다 그러면 AskView.vue 가 뿌려짐

ex>

   <template>
     <div id="app">
       <AskView></AskView>
     </div>
   </template>

이렇게 되는것!

{
      path: '/user/:id', //*****
      component: UserView,
    } //라우터 설정  id 값을 넘어오게 한다. 

...
<small>{{ news.time_ago }} by
   <router-link v-bind:to="`/user/${news.user}`">{{ news.user }}</router-link> 
</small>
       ...

넘겨 줄 id 는 {news.user} 값

링크를 눌렀을때

http://localhost:8080/user/yewenjie

위 url으로 이동하면서 param.id 값이 yewenjie를 가지게 된다.

라우터 트랜지션

https://vuejs.org/v2/guide/transitions.html

App.vue 에서

   <transition name = "fade"> 
      <router-view></router-view>
    </transition>

아래 style에 추가

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

tansition 태그에서 name 뒤에오는 fade가 css규칙에 prefix가 된다.

fade 를 다른 값으로 바꿔도 됨

코드 스플리팅 (lazy loading)

화면의 개수가 많아 졌을때

모든 페이지 로딩은 시간이 많이 걸림

원하는 페이지만 불러오고 나머지는 이동했을때만 불러오게 만들자!

초기에 앱 로딩되는 속도가 줄어든다.

export default new VueRouter({
  routes: [
    {
      path: '/login',
      component: () => import('@/views/LoginPage.vue'), // 이렇게 할용 

    },
    {
      path: '/signup',
      component: () => import('@/views/SignupPage.vue'),
    },
  ],
});

리다이렉트

처음 진입 페이지 설정

처음 서비스가 실행 될때 특정 페이지로 가고싶다.

  routes: [
    {
        path: '/',
        redirect: '/login', ////요래
    }
    {
      path: '/login',
      component: () => import('@/views/LoginPage.vue'),
    },
    {
      path: '/signup',
      component: () => import('@/views/SignupPage.vue'),
    },
     {
        path: '*' //위에 글을 제외한 나머지 모든글에 반영된다. 
         component: () => import('@/views/NotFoundPage.vue'),
    }
  ],

(TIP!!) 컴포넌트 등록할때는 스크립트 단에는 파스칼방식인데 태그 등록할 때는 케밥 방식을 따른다.

 <tool-bar></tool-bar> 

ctrl + alt 누르면 내용 볼 수 있음 (케밥으로 연결했을 때 )

네비게이션

** 헤더 컴포넌트를 만들어서 라우터 링크를 이용해서 페이지를 네비게이션 할 수 있는 방법

<template>
  <div>
    <router-link to = "/news">News</router-link>
    <router-link to = "/ask">Ask</router-link>
    <router-link to = "/jobs">Jobs</router-link>
    <!-- 자동으로 a 태그로 전환된다. -->
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

history

url 에 #이 없어진다.

mode: 'history', // url 에 #이 없어진다. //'http://localhost:8080/#/'
//실제 서버에 올릴때 url에 대한 우회, 필터링을 넣어줘야한다. 
routes: [
    {
      path: '/',
      redirect: '/login',
    },
    {
      path: '/login',
      component: () => import('@/views/LoginPage.vue'),
    },
    {
      path: '/signup',
      component: () => import('@/views/SignupPage.vue'),
    },
    {
        path: '*'  
        component: () => import('@/views/NotFoundPage.vue'),

    }
  ],

scoped

<style scoped>

</style>

해당 컴포넌트에만 적용되는 스타일 속성을 의미한다.

헤더에 특정 라우트링크만 스타일 지정하고 싶을때

.header .router-link-exact-active {
  color: #35493e;
}

활성화된 링크 제외 나머지는 다 하얗게 처리

.header .router-link-exact-active {
  color: #35493e;
}
.header a{
  color:white
}