Vue router

Vue router는 vue에서 라우팅 기능을 구현할 수 있도록 지원하는 공식 라이브러리이다.

Vue router를 구현할 때 필요한 특수 태그의 기능은 다음과 같다.

태그	설명
<router-link to="URL 값">	페이지 이동 태그. 화면에서는 <a>로 표시되며 클릭하면 URL로 이동한다.
<router-view>	페이지 표시 태그. 변경되는 URL에 따라 해당 컴포넌트를 뿌려주는 영역.

<!DOCTYPE html>
<head>
  <title>Vue router</title>
</head>
<body>
  <div id="app">
    <h1>뷰 라우터 예제</h1>
    <p>
      <router-link to="/main">Main 컴포넌트로 이동</router-link>
      <router-link to="/login">Login 컴포넌트로 이동</router-link>
    </p>
    <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.0.1/dist/vue-router.js"></script>
  <script>
    var Main = {template: '<div>main</div>'}
    var Login = {template: '<div>Login</div>'}

    var routes = [
      { path: '/main', component: Main },
      { path: '/login', component: Login }
    ]

    var router = new VueRouter({
      routes
    })

    var app = new Vue({
      router
    }).$mount('#app')
  </script>
</body>
</html>

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

이 부분은 새 인스턴스를 생성하고 라우터의 정보가 담긴 router를 추가하는 코드이다.

여기서 $mount()는 el 속성과 같이 인스턴스를 화면에 붙여주는 역할을 한다. 인스턴스를 생성할 때 el 속성을 넣지 않았더라도 생성하고 나서 $mount()를 이용하면 강제로 인스턴스를 화면에 붙일 수가 있다.

저작자표시 비영리 변경금지

'JavaScript > Vue' 카테고리의 다른 글

Nested Router (0)	2022.06.06
[Vue.js] router URL의 해시 값(#)을 없애는 법 (0)	2022.06.06
같은 레벨의 컴포넌트 간 통신 (0)	2022.06.06
하위에서 상위 컴포넌트로 이벤트 전달하기 : $emit (0)	2022.06.05
상위에서 하위 컴포넌트로 데이터 전달하기 : props (0)	2022.06.05

🐠붕어의 코딩 공부 기록🐠

Vue router

'JavaScript > Vue' 카테고리의 다른 글

댓글

티스토리툴바

Vue router

'JavaScript > Vue' 카테고리의 다른 글

관련글

댓글

티스토리툴바