본문 바로가기
클라이언트/Vue.js
[뷰(Vue)] Router(라우터)
Hana_h 2023. 8. 2. 13:18

// 라우팅
    - 웹 페이지 간의 이동 방법

// 뷰 라우터

- 라우팅 기능을 이용할 수 있는 라이브러리

// 설정

1. CDN

<script src="https://unpkg.com/vue-router@3.5.3/dist/vue-router.js"></script>

    ~ vue2를 사용하는 경우 위 CDN 사용 

2. npm install

    ~ 터미널에서 router 설치(vue2라서 vue-router@3!)

npm install vue-router@3



- src > router.js 파일 생성

import Vue from 'vue'
import Router from "vue-router";
import List from './components/List.vue'

Vue.use(Router) 

const routes = [
  {
    path: '/list',
    component: List,
  }
]

export default new Router({
  mode: 'history',
  routes,
})


- main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router.js'
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'

Vue.config.productionTip = false
new Vue({
  render: h => h(App),
  router
}).$mount('#app')


* bootstrap 설치

npm install bootstrap@5.2.3



- 페이지 이동 태그

<router-link to="URL"></router-link>


  * url에 값을 넣고 싶다면

<router-link :to="URL/${값}"></router-link>


- 페이지 표시 태그

<router-view></router-view>


   * 데이터 바인딩을 원한다면

<router-view :이름=""></router-view>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    </head>
<body>

    <div id="app">
        <div>
            <router-link to="/login">Login</router-link>
            <router-link to="/main">Main</router-link>
        </div>
        <router-view></router-view>
    </div> 

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router@3.5.3/dist/vue-router.js"></script>

    <script>

        var LoginComponent = {
            template: '<div>login</div>'
        }

        var MainComponent = {
            template: '<div>main</div>'
        }
    
        var router = new VueRouter({
            // routes : 페이지의 라우팅 정보
            routes: [                
                // 로그인 페이지 정보
                {
                    // 페이지의 url 이름
                    path: '/login',
                    // 해당 url에서 표시될 컴포넌트
                    component: LoginComponent
                },
                // 메인 페이지 정보
                {
                    path: '/main',
                    component: MainComponent
                }
            ]
        });

        new Vue({
           el: '#app',
           router: router 
        });

    </script>

</body>
</html>

// 네스티드 라우터

- 상위 컴포넌트1개에 하위 컴포넌트 1개가 포함되어 있는 구조

var routes = [
    {
        path: '/user',
        component: User,
        children: [
            {
                path: 'post',
                component: UserPost
            },
            {
                path: 'profile',
                component: UserProfile
            },
        ]
    }
];

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    </head>
<body>

    <div id="app">
        <div>
            <router-link to="/user">User</router-link>
            <router-link to="/user/post">Post</router-link>
            <router-link to="/user/profile">Profile</router-link>
        </div>
        <router-view></router-view>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router@3.5.3/dist/vue-router.js"></script>
    <script>
    
        var User = {
            template: `
                <div>
                    User Component
                    <router-view></router-view>
                </div>
            `
        };

        var UserPost = {
            template: '<p>User Post Component</p>'
        }

        var UserProfile = {
            template: '<p>User Profile Component</p>'
        }

        var routes = [
            {
                path: '/user',
                component: User,
                children: [
                    {
                        path: 'post',
                        component: UserPost
                    },
                    {
                        path: 'profile',
                        component: UserProfile
                    },
                ]
            }
        ];

        var router = new VueRouter({
            routes
        })

        new Vue({
            router
        }).$mount('#app');

    </script>

</body>
</html>

// 네임드 뷰

- 여러 개의 컴포넌트를 동시에 표시하는 라우팅 방식

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    </head>
<body>

    <div id="app">
        <router-view name="header"></router-view>
        <router-view></router-view>
        <router-view name="footer"></router-view>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router@3.5.3/dist/vue-router.js"></script>
    <script>

        var Body = {
            template: '<div>This is Body</div>'
        }

        var Header = {
            template: '<div>This is Header</div>'
        }

        var Footer = {
            template: '<div>This is Footer</div>'
        }

        var router = new VueRouter({
            routes: [
                {
                    path: '/',
                    components: {
                        default: Body,
                        header: Header,
                        footer: Footer
                    }
                }
            ]
        });

        new Vue({
           router 
        }).$mount('#app');
    
    </script>

</body>
</html>

// $router

- push('url') : 이벤트 발생 시 특정 페이지를 표시하고자 할 때 사용

- go(1) : 앞으로 가기

- go(2) : 뒤로 가기

<h5 @click="$router.push(`/detail/${a.number}`);" class="titleClick">{{ a.title }}</h5>

 

 

'클라이언트 > Vue.js' 카테고리의 다른 글

[뷰(Vue)] CSSGram  (0) 2023.08.04
[뷰(Vue)] Axios, Form  (0) 2023.08.02
[뷰(Vue)] 애니메이션 / lifecycle hook  (0) 2023.07.31
[뷰(Vue)] 사용자 입력, watch, computed  (0) 2023.07.31
[뷰(Vue)] export, import / 컴포넌트  (0) 2023.07.31

'클라이언트/Vue.js' Related Articles

티스토리툴바