SSAFY/Python문법 정리

[JS]Vue router

황성안 2021. 5. 10. 02:00

728x90

시작하기(세팅)

vue router

router 를 복습하기위한 파일 생성해주기

vue 2 를 선택해서 만들어줍니다.

vue create second-vue-app .

ls 로 확인해보고 second-vue-app 으로 들어가기
```
cd second-vue-app
```

서버를 실행해본다
```
npm run serve
```

정상적으로 실행이 됐다면 서버를 끄자.

라우트 관련된 설정을 하자

이러한 플러그인들은 제~일 처음 다적어줘야합니다잉~
```
vue add router
```
실행해보면 현재 디렉토리에 commit이 안된 파일이있는데 그냥 진행할래? Yes
다시 서버실행
```
npm run serve
```
요롷게하면 상단에 Home|About 이라는 네비바가 뜨는데 이동해보면 새로고침이 안뜬다!

router의 index.js 를 가보자

index,js 는 진입점이라 보면된다.

진입점이 커지면 분리해서 사용하면 된다.

우리는 routes라는 list 만 보면된다.(장고의 urls.py 와 비슷함)

경로 :

경로이름 :

path로 접속했을 때 보여줄 컴포넌트

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/', // 경로
    name: 'Home', // 경로의 이름
    component: Home // path로 접속했을 때 보여줄 컴포넌트
  },
  {
    path: '/about',
    name: 'About',
    // 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: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

7 . 최상위 component로 가보자 ( App.vue)

아래 코드중 는

<template>
  <div id="app">
  <!-- 최상위 nav 바 -->
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/> 
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

필요없는거 다지운상태

<template>
  <div id="app">
    <!-- 최상위 nav 바 -->
    <div id="nav">
    </div>
    <router-view/> 
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

router 의 index,js 로가자

routes 리스트 안의 경로 이름 컴포넌트 수정을하고 import를 작성하고

vue를 작성하러가자

import Vue from 'vue'
import VueRouter from 'vue-router'
import Lunch from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/lunch', // 경로
    name: 'Lunch', // 경로의 이름
    component: Lunch // path로 접속했을 때 보여줄 컴포넌트
  },
  {
    path: '/about',
    name: 'About',
    // 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이랑 같은말임
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

Lunch.vue 작성

<template>
  <div>
      <h1>Lunch Page</h1>
  </div>
</template>

<script>
export default {
    name: 'Lunch',
}
</script>

<style>

</style>

저기로 접속하기위해 링크를 만들어줘야한다 App.vue로 이동

Lunch

hrem 를 안쓰고 to를 쓰게된다.

<template>
  <div id="app">
    <!-- 최상위 nav 바 -->
    <div id="nav">
      <router-link to="/lunch">Lunch</router-link>
    </div>
    <router-view/> 
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

path 에 , component에 적어줬으니 import 잘 시켜줫는지? 후에 app.vue에서 router-link 잘 적었는지

views 폴더에 lotte.vue 를만들어주자

index 작성, views 폴더 안 vue 작성, app.vue 작성

원래 주소가바뀌면 서버로부터 새로운 주소를 받아오는게 맞다 근데 어떻게 새로고침 없이 받아오나?

History 라는 기능을 사용하여 url이 바뀌도록하는 것인데 저기능이

index.js 에서 맨밑 의 아래 코드가 history 사용 코드이다.

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

옛날 사용방식은 hash이다.

이경우 주소 중간에 #이 붙는다

http://localhost:8080/#/lunch

const router = new VueRouter({
  mode: 'hash',
  base: process.env.BASE_URL,
  routes
})

vue router

사용자를 강제로 보내야할 경우가 생긴다.

런치 > 로또로 강제로보내기

https://router.vuejs.org/kr/guide/essentials/navigation.html

Lunch.vue

1번 방법

<template>
  <div>
      <h1>Lunch Page</h1>
    

      <button @click="onClick"> Lotto 페이지로 가기</button>
  </div>
</template>

<script>
export default {
    name: 'Lunch',
    methods:{
        onClick: function() {
            // 강제로 URL 변경
            this.$router.push('/lotto')
        },
    },
}
</script>

<style>

</style>

2번 방법 (https://router.vuejs.org/kr/guide/essentials/dynamic-matching.html)

index.js

이상태로하면 주소창에 이동이 바로되지않는다.

http://localhost:8080/#/lotto/5/ 뒤에 숫자를 붙여줘야 이동할수있음 ㅠㅠ

그래서 vue에서 객체로 넣어준다.

import Vue from 'vue'
import VueRouter from 'vue-router'
import Lunch from '../views/Lunch.vue'
import Lotto from '@/views/Lotto.vue'
// @ => src/ 폴더부터 시작하겠다는 의미
Vue.use(VueRouter)

const routes = [
  {
    path: '/lunch', // 경로
    name: 'Lunch', // 경로의 이름
    component: Lunch // path로 접속했을 때 보여줄 컴포넌트
  },
  {
    path: '/lotto/:lottoNumber',
    name: 'Lotto',
    component: Lotto
  },
]

const router = new VueRouter({
  mode: 'hash',
  base: process.env.BASE_URL,
  routes
})

export default router

lunch.vue

<template>
  <div>
      <h1>Lunch Page</h1>
    

      <button @click="onClick"> Lotto 페이지로 가기</button>
  </div>
</template>

<script>
export default {
    name: 'Lunch',
    methods:{
        onClick: function() {
            // 강제로 URL 변경
            this.$router.push(
                {
                    name: 'Lotto',
                    params: { lottoNumber: 5 }
                }
            )
        },
    },
}
</script>

<style>

</style>

주소 동적으로 바꾸기

lunch.vue

v-model =

data가 바뀌면 Dom 이 바뀌게끔 돼있는게 기본

v-model을 쓰면 반대로가능 input 값이 바뀌면 data가 바뀐다.

이를 양방향 바인딩이라고 한다.

<template>
  <div>
      <h1>Lunch Page</h1>

    <input type="text" v-model="lottoNumber">
      <button @click="onClick"> Lotto 페이지로 가기</button>
  </div>
</template>

<script>
export default {
    name: 'Lunch',
    data:function() {
        return {
            lottoNumber: 0,
        }
    },
    methods:{
        onClick: function() {
            // 강제로 URL 변경
            this.$router.push(
                {
                    name: 'Lotto',
                    params: { lottoNumber: this.lottoNumber }//데이터에 있는 값을 동적으로 넣고싶을떄
                }
            )
        },
    },
}
</script>

<style>

</style>

lotto 번호 뽑기 만들기

npm i lodash

npm run serve

Lotto.vue

<template>
  <div>
      <h1> Lotto Page </h1>
      <p> 행운의 숫자들 : {{ luckyNumbers }} </p>
  </div>
</template>

<script>
import _ from 'lodash'

export default {
    name:'Lotto',
    data: function() {
        return {
            luckyNumbers: [],
        }
    },
    created() {
        // console.log(this.$route)    // params 꺼낼 때 사용
        // console.log(this.$router)   // push할 때 사용

        // console.log(this.$route.params.lottoNumber)
        
        
        //1. params에 있는 숫자를 꺼내서
        const lottoNumber = this.$route.params.lottoNumber


        //2. 랜덤한 숫자 뽑은 다음
        const randomNumbers = _.range(1,46)
        const luckyNumbers = _.sampleSize(randomNumbers, lottoNumber)

        //3. 화면에 출력 (데이타만들어줘야행)
        this.luckyNumbers = luckyNumbers
    },
}
</script>

<style>

</style>

TIP

vue 의 생태계

vue 는 cli 가있다. 얘는

vue - router

vuex 라는 게있다 저 친구들은 따로 설치를 해줘야한다.

728x90

'SSAFY > Python문법 정리' 카테고리의 다른 글

[Vue + Django] Client+ Server (0)	2021.05.17
[JS] 새로고침 없이 좋아요, Follow 하기 (0)	2021.05.06
[Python] Prim 알고리즘 (0)	2021.04.21
[Python] 큐의 구조 (0)	2021.03.03
[Python] 스택 2 (0)	2021.02.24

현재글[JS]Vue router

250x250

삶과 개발

Vanced, SSAFY, 국민은행보안, 포맷불가, net5, Vanced 오류, 최신 버전에서 시청, net core, SSD인식불가, 아삽, Vanced 최신버전, c#, 유튜브밴스드, HDD인식불가, 교체이후 인식불가, app.UseHttpsRedirection();, KB PAY, 밴스드 오류, net core 5, 비공개 연결,

Today :
Yesterday :

일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

삶과 개발

[JS]Vue router

시작하기(세팅)

vue router

vue router

주소 동적으로 바꾸기

lotto 번호 뽑기 만들기

'SSAFY > Python문법 정리' 카테고리의 다른 글

'SSAFY/Python문법 정리'의 다른글

티스토리툴바

[JS]Vue router

시작하기(세팅)

vue router

vue router

주소 동적으로 바꾸기

lotto 번호 뽑기 만들기

'SSAFY > Python문법 정리' 카테고리의 다른 글

'SSAFY/Python문법 정리'의 다른글

관련글

티스토리툴바