Skip to content
logo
Padosum Wiki
Github
On this page

뷰 라우터

수정하기
문서 생성 2021-05-13 23:07:18 최근 수정 2021-06-16 23:22:42
On this page

뷰 라우터?

  • 뷰에서 싱글 페이지 애플리케이션을 구현하거나 페이지 간 이동기능을 구현할 때 사용하는 라이브러리

라우터 뷰

  • URL에 따라 뿌려주는 영역은 라우터에서 제공하는 <router-view></router-view> 태그로 지정할 수 있다. (뷰 인스턴스에 라우터를 연결해야함)
  • <router-link> 태그를 이용하면 a 태그가 생성된다. 
<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/dist/vue-router.js"></script>
</body>
let LoginComponent = {
    template: '<div>login</div>'
}
let MainComponent = {
    template: '<div>Main</div>'
}


let router = new VueRouter({
    // 페이지의 라우팅 정보 -> 어떤 URL로 이동했을 때 어떤 페이지가 출력될지에 대한 정보 
    routes: [
        { 
        path: '/',
        redirect: '/main',
    },
        {
            // 페이지의 url 
            path: '/login',
            // 해당 url에서 표시될 컴포넌트
            component: LoginComponent
        },
        {
            path: '/main',
            component: MainComponent
        }
    ]
});


new Vue({
    el: '#app',
    router:  router 
});
  • 라우터 폴더명은 /routes로 작명하는 것이 관습
  • /views 폴더에는 라우팅 정보만 담은 뷰만, 데이터를 가져오는 로직등은 제외하기 → 별도의 컴포넌트에서 불러오고, 라우터에서 컴포넌트를 등록

라우터 옵션

url에 있는 # 해쉬값 지우기

const router = new VueRouter({
    mode: 'history'
})

https://stackoverflow.com/questions/34623833/vue-js-how-to-remove-hashbang-from-url

component

  • 라우터에 있는 component는 무조건 하나만 올 수 있기에 component이고 뷰 인스턴스에서는 여러개가 등록 가능해서 components다.

생각

Vuepress를 그냥 가져다 쓰기만 했을 때 왜 url에 #이 붙는지 알 수가 없었는데 이제서야 공부를하니 알게되었다! 다른 분이 올려놓은 질문글에 친절히 답변을 해주셨는데 SPA에서 라우터라는 개념 자체가 hashchange 이벤트를 기반으로 하여 URL이 바뀌었을 때 서버로 가지 않고 화면을 이동하는 효과를 주기 위함이라고... 어쩐지 브라우저에서 뭔가 로딩이 되지 않고 바로바로 페이지 이동이 되는 느낌이었다.

Reference

LINKS TO THIS PAGE

Tags