vue router 기본 개념

1. router.js

 

import Home from './views/Home.vue'

router.js에서 home.vue 파일을 가지고 옴.

 

 

 

path: 주소

주소와 연결하는 component를 선언한다.

 

 

 

about.vue 연결을 위해 ABOUT 선언.

 

import Home from './views/Home.vue'​

 

 

 

2. app.vue

라우터가 연결할 장소를 뿌리기 위해 v-content안에

      <router-view></router-view>

를 적어준다.

 

3. about.vue

 

router-link 작성.

 

<template>
  <div>
    This is About Page
    클릭
    <router-link :to="{name: 'home'}">
      클릭
    </router-link>

  </div>
</template>

 

화면 전환하는 방법(router)

 

1. router.push를 이용

 

1)눌렀을때 home으로 이동시키기 위해

<v-list-tile @click="$router.push({name: 'home'})">

와 같이 작성.

 

 

2)about으로 이동시키기 위해

 <v-list-tile  @click="$router.push({name: 'about'})">

와 같이 작성.

 

path를 이용하여 화면 전환도 가능하다.

 

<v-list-tile @click="$router.push({path: '/'})">

<v-list-tile @click="$router.push({path: '/about'})">

 

 

 

2.  router :to="{name: ''}" exact

 

router의 속성을 이용한다.

        <v-list-tile router :to="{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>

 

값 전달하기 - parameters

 

1)router :to="{name: ''}" exact를 이용해 users.vue를 연결한다.

 

2)Users.vue에 id 값을 적는다.

<template>
    <div>
        {{ userId }}
    </div>

</template>

<script>
    export default {
        computed: {
            userId() {
                return this.$route.params
            }
        }
    }
</script>

 

this.$router와 this.route의 차이점

 

router: router.js 의 설정값들

route: 현재 주소에 관련된 값들

 

        created() {
            console.log('router', this.$router)
            console.log('route', this.$route)
        }

 

 

parameter로 값을 넣는 법

 

1.app.vue params 객체 안에 값을 넣어야함.

      <v-list-tile router :to="{
        name: 'users', 
        params: {
          userId: 12343,
          name: 'hoho'

        }
      }" exact>

 

2. router.js에서 주소창 뒤에 어떤게 들어갈지 객체의 값 설정

 

    {
      path: '/users/:userId',
      name: 'users',
      // 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
    }

 

값 전달하기 - query

 

1. app.vue 에서 query 부분 추가

      <v-list-tile router :to="{
        name: 'users', 
        params: {
          userId: 4321,
          name: 'hoza'

        },
        query: {
          group: 'member',
          category: 'trial'
        }
      }" exact>