Vue.js

[기초]#5 Vue의 Router 라우터란? (설치,설정,데이터 IN/OUT)

dev.mk 2022. 6. 11. 20:46
반응형

뷰 라우터는 뷰 라이브러리를 이용하여 싱글 페이지 애플리케이션을 구현할 때 사용하는 라이브러리이다.

페이지 이동하는 기능을 뷰 라우터로 구현할 수 있다.

 

이미지로 나타내면..

페이지간 이동을 시켜준다.

주요 기능

  • Nested route/view mapping
  • Modular, component-based router con
  • Route params, query, wildcards
  • View transition effects powered by Vue.js transition system
  • Fine-grained navigation control
  • Links with automatic active CSS classes
  • HTML5 history mode or hash mode, with auto-fallback in IE9
  • Customizable Scroll Behavior

 

1. 라우트 설치

vue-cli를 통해 프로젝트를 만들었기 때문에 기본적으로 Vue Router가 연결되어 있다.

Vue Router 는 프로젝트 생성시 기본 dependencies 로 추가 할수도 있고, npm or yarn 을 사용하여 필요에 따라 추가 할수 있다.

NPM

// {패키지 관리자명} install {플러그인명} --save
npm install vue-router
npm install vue-router --save-dev

—save, —save-dev 는 플러그인이 dependencies 항목에 저장 되는지 아니면 devDependencies 에 저장 되는지를 선택 하는것이다. devDependencies 는 개발모드에서만 활용 되는 플러그인을 저장 한다. —save 는 기본값 이기 때문에 생략 가능하다.

 

YARN

// {패키지 관리자명} add {플러그인명}
yarn add vue-router
yarn add --dev vue-router

—dev 는 devDependencies 에 저장 한다.

 

 

2.라우트 설정

component를 연결하는 route 설정 파일 만들기

src/main.js

import Vue from 'vue';
import App from './App.vue';
import router from './router'; //VueRouter를 불러온다.
import store from './store';

Vue.config.productionTip = false;

new Vue({
  router, //Vue 인스턴스에 연결
  store,
  render: (h) => h(App),
}).$mount('#app');

 

src/router/router.js 생성

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

//Vue와 VueRouter 연결
Vue.use(VueRouter);


//VueRouter에 route를 등록하고 설정한다.
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes : [
    {
      path: '/',
      name: 'Home',
      component: Home,
    },
    {
      path: '/about',
      name: 'About', 
      //네임값은 값을 보낼때 맵핑용으로 사용된다.
      component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
    },
  ]
});

//설정한 VueRouter 내보낸다.
export default router;

path : 사이트 url 경로
name: Component 이름(호출할 때 사용)
component : 해당 경로에 보이는 Component

 

※ Home Component와 About Component 방식이 다른 이유는?

- 기본적으로 Vue.js는 싱글 페이지 애플리케이션이다.

- 사이트가 로딩될 때 우리가 생성한 컴포넌트들을 모두 불러온다. 그리고 모두 불러온 컴포넌트들은 사용자 요청에 맞게 하나씩 렌더링 한다.

 

※차이점

Home : 사이트를 최초 방문할 때 모든 컴포넌트를 가지고 오게 하는 방식

About : 사이트를 최초 방문과 상관없이 사이트 해당 경로에 접근했을 때 해당 컴포넌트를 가지고 오는 방식

 

 

src/App.vue

<template>
  <div id="app">
    <div id="nav">
      <!-- 해당 페이지로 이동 -->
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <!-- 선택한 페이지 렌더링 -->
    <router-view/>
  </div>
</template>

<style lang="scss">
#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;
  a {
    font-weight: bold;
    color: #2c3e50;
    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>

tamplate 태그 안에서 라우팅 역할을 해주는 기술은 <router-link>이다.  우리가 선택한 페이지에 컴포넌트를 렌더링 해주는 부분은 <router-view/>이다. 

 

Home과 About을 클릭할때 각각 다른 페이지를 호출한다.

3.데이터 넘기기

데이터를 전달하는 방법은 2가지이다.

 

1.  Query

{name: 'Query', query: {name: '홍길동', age: 25 }}

2. Params

{name: 'Params', params: {name: '에디슨', age: 30 }}

name갑은  router.js 파일안에 작성한 name과 동일해야 한다.

 

src/router/router.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import Main from '@/views/Main.vue';
import Query from '../views/Query.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'Main',
    component: Main
  },
  {
    path: '/Query',
    name: 'Query',
    component: Query,
  },
  {
    path: '/Params',
    name: 'Params',
    component: () => import(/* webpackChunkName: "about" */ '../views/Params.vue'),
    // true로 설정하면 데이터를 props로도 받습니다.
    props: true,
  },
];
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
});

export default router;

Params로 데이터를 전달할 때 route 옵션에서 props: true로 설정하면 props로 값을 받을 수 있다. 

 

 

<template>
  <div>
    Main
    <div>
      <router-link to="/">Main 페이지로</router-link>
    </div>
    <div>
      <br/>
      <div>
        <button @click="clickList">Query 프로그래밍 방식</button>
      </div>
      <br/>
      <div>
        <router-link:to="{ name: 'Query', query: { name: 'Query 선언적 방식', age: 1 } }">
          Query 선언적 방식
        </router-link>
      </div>
      <br/>
      <div>
        <button @click="clickParams">Params 프로그래밍 방식</button>
      </div>
      <br/>
      <div>
        <router-link:to="{
            name: 'Params',
            params: { name: 'Params 선언적 방식', age: 1 },
          }"
        >
          Params 선언적 방식
        </router-link>
      </div>
    </div>
    <router-view />
  </div>
</template>
<script>
export default {
  name: "App",
  methods: {
    clickList() {
      this.$router.push({
        name: "Query",
        query: { name: "Query 방식", age: 2 },
      });
    },
    clickParams() {
      this.$router.push({
        name: "Params",
        params: { name: "Params 방식", age: 2 },
      });
    },
  },
};
</script>

 

 

4.데이터 받기

Main.vue

<template lang="ko">
    <div>
        <h1>Main 페이지</h1>
    </div>
</template>
<script>
export default {
  name: "Main",
};
</script>

 

Query.vue

<template>
  <div>
    <h1>Query</h1>
    <h2>name: {{ $route.query.name }}</h2>
    <h2>age: {{ $route.query.age }}</h2>
  </div>
</template>


<script>
export default {
  name: "Query",
  created() {
    console.log(this.$route.query.name);
    console.log(this.$route.query.age);
  },
};
</script>

 

Params.vue

<template>
  <div>
    <h1>Params</h1>
    <h2>params로 받은 데이터</h2>
    <h2>name: {{ $route.params.name }}</h2>
    <h2>age: {{ $route.params.age }}</h2>
    <h2>props로 받은 데이터</h2>
    <h2>name: {{ name }}</h2>
    <h2>age: {{ age }}</h2>
  </div>
</template>

<script>
export default {
  name: "Params",
  props: {
    name: {
      type: String,
      default: "",
    },
    age: {
      type: Number,
      default: 0,
    },
  },
  created() {
    console.log(this.$route.params.name);
    console.log(this.$route.params.age);
  },
};
</script>

 

5. 라우트 중첩과 리다이렉트

라우트 중첩 = 컴포넌트 중첩

컴포넌트 중첩을 활용하면 SAP(싱글페이지 어플리케이션 페이지)에 맞게 개발할 수 있다.

redirect 는 특정 URL로 접속했을 때 다른 URL로 보내는 기능

 

import Vue from 'vue';
import VueRouter from 'vue-router';
import Login from '@/views/Login.vue';
import LoginLayout from '@/layouts/LoginLayout.vue';


Vue.use(VueRouter);


const routes = [
  {
    path: '/',
    redirect: "/login",
    component: LoginLayout,
    children: [{
      path: '/login',
      name: "Login",
      component: Login
    }],
  },
  {
    path: '/main',
    name: 'Main',
    component: () => import('@/views/Main.vue'),
    children: [
    {
      path: 'home',
      name: "Home",
      component: () => import('@/components/Home.vue')
    },
    {
      path: 'setting/:id',
      name: "Setting",
      component: () => import('@/components/Setting.vue')
    }
  ],
  },
];

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

export default router;

 중첩하는 방법은 children을 활용하면 된다.

children 상위 영역은 "부모 컴포넌트" , children 영역은 자식 컴포넌트다.

그리고 redirect 코드가 있는데

path : '/'  루트 경로로 접근하면 redirect : '/login' 로그인 페이지로 이동한다.

 

 

 

 

출처

http://vrouter.uninote.com.cn/kr/installation.html

https://any-ting.tistory.com/47 

반응형
저작자표시 (새창열림)