VUE router

JavaScript / Vue

라우터란 페이지까지 이동할 수 있는 기능을 의미.
라우터를 사용하면 경로와 컴퓨넌트를 등록하면 싱글 페이지 어플리케이션(SPA : Single Page Application)
사용자가 클릭한 화면이 쉽게 이동하도록 도와주는 역할을 담당.

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100

<!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>router</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
        *{box-sizing: border-box; font-family: 'Poppins', sans-serif; font-weight: 300;}
        html, body{margin: 0; padding: 0;}
        h1, h2,h3, h4, h5, h6, p{margin: 0;}
        ul, ol{margin: 0; padding: 0; list-style: none;}
        a{text-decoration: none;}
        header{height: 60px; background-color: #ddd; display: flex; justify-content: center; align-items: center; padding: 0 10px;}
        header ul {display: flex;}
        header ul li {margin:0 15px;}
        header ul li a {display: block; font-size:16px; color: #555;}
        section {}
        section div {height: calc(100vh - 60px); display: flex; justify-content: center; align-items:center;}
        section div h3 {font-size: 40px; color: #000;}
        section div#main {background-color: #e50;}
        section div#about {background-color: #e8f;}
        section div#project {background-color: #5a0;}
        section div#portfolio {background-color: #e05;}
        section div#contact {background-color: #50e;}
    </style>
</head>
<body>
    <div id="app">
        <header>
            <ul>
                <li><router-link to="/">Home</router-link></li>
                <li><router-link to="/about">About</router-link></li>
                <li><router-link to="/project">Projects</router-link></li>
                <li><router-link to="/portfolio">Portfolio</router-link></li>
                <li><router-link to="/contact">Contact</router-link></li>
            </ul>
        </header>
        <section>
            <router-view></router-view>
        </section>
    </div>
    <script>
        // 라우터에 등록할 컴포넌트를 정의
        const tmMain = {
            template : `<div id="main"><h3>Main Page</h3></div>`
        }
        const tmAbout = {
            template : `<div id="about"><h3>About Page</h3></div>`
        }
        const tmProject = {
            template : `<div id="project"><h3>Project Page</h3></div>`
        }
        const tmPortfolio = {
            template : `<div id="portfolio"><h3>Portfolio Page</h3></div>`
        }
        const tmContact = {
            template : `<div id="contact"><h3>Contact Page</h3></div>`
        }

        // 이동할 url 주소명과 사용할 컴포넌트를 등록
        const rtRoutes = [
            {
                path : "/",
                component : tmMain
            },
            {
                path : "/about",
                component : tmAbout
            },
            {
                path : "/project",
                component : tmProject
            },
            {
                path : "/portfolio",
                component : tmPortfolio
            },
            {
                path : "/contact",
                component : tmContact
            }
        ]

        // 라우터 인스턴스를 생성하고 객체의 속성인 routes 옵션에 경로에 따른 템플레이트를 전ㄷ날
        const router1 = new VueRouter({
            routes : rtRoutes
        });

        new Vue({
            el: "#app",
            router : router1
        })
    </script>
</body>
</html>

REFERENCE
뷰(Vue.js) 프로그래밍 과정 _ 하이미디어 아카데미

  • © 2020-2025 404 Not Found
  • Powered by Hexo Theme Ayer