Vue 라우터 자습서 - Vue의 라우터 라이브러리 사용

Vue는 Vue 응용 프로그램 내에서 페이지 경로와 경로를 설정하는 데 사용할 수있는 자체 라우터 라이브러리 인 vue-router를 제공 합니다. 이 튜토리얼에서는 vue-router를 통합하고 두 가지 구성 요소로 간단한 탐색을 설정합니다.

Vue 라우터 설치

Vue CLI를 사용하여 프로젝트를 시작했을 때 우리는 vue-router  패키지를 포함하지 않았습니다 . 이 옵션은 수동 구성 옵션을 선택하여 프로젝트를 시작할 때 지정할 수있는 옵션입니다.

걱정하지 않아도, 우리는 라우터를 라우터에 추가 할 수 있습니다.

먼저 콘솔에서 프로젝트 폴더를 방문하여 다음 명령을 실행하십시오.

> yarn add vue-router

참고 : 우리 프로젝트는 원사를 사용하고 있지만 npm을 사용하는 경우 npm install vue-router --save를 사용하여 설치할 수 있습니다. 

다음으로, 우리는  다음과 같은 내용 으로 /src/router.js 파일 을 만들어야합니다 .

import Vue from 'vue'
import Router from 'vue-router'
import Skills from './components/Skills.vue'
import About from './components/About.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'skills',
      component: Skills
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})

이렇게  하면  아직 존재하지 않는 About 구성 요소 와 함께 Skills.vue 구성 요소가 가져옵니다 .

빨리 가서 그 파일을 진짜로 만들고 다음 내용을 붙여 넣으세요 :

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna ali...</p>
  </div>
</template>

다음으로 /src/main.js를 방문  하여 다음을 추가하십시오 :

// other imports removed for brevity
import router from './router'

new Vue({
  router,               // Add this line
  render: h => h(App)
}).$mount('#app')

다음으로 /src/App.vue  파일을 방문하여 <template>  섹션을 다음과 같이 수정하십시오 .

<template>
  <div id="app">
      <nav>
        <router-link to="/">Home</router-link>
        <router-link to="/about">About</router-link>
      </nav>
    <router-view/>
  </div>
</template>

우리는 Vue 구성 요소 router-link를 사용하여 두 개의 링크가있는 nav 요소를 추가하고 있습니다.

또한  사용자가 탐색 항목을 클릭 할 때보기가 배치 될 위치를 나타내는 다른 Vue 구성 요소 라우터보기 를 추가했습니다 .

App.vue에 있는 동안  컴포넌트 의 스타일 섹션에 스타일 을 지정해 보겠습니다 . 또한  UI가 더 이상 세로로 가운데 정렬되지 않도록 본문 선택 도구를 수정하십시오 .

body {
  background-color: #EEEEEE;
  font-family: 'Montserrat', sans-serif;
  display: grid;
  grid-template-rows: auto;
  justify-items: center;
  padding-top: 50px;
}

nav {
  padding: 20px 20px 20px 0;
}

nav a {
  padding: 10px;
  text-decoration: none;
  background: #fff;
  border-radius: 3px;
  color: rgb(0, 110, 255);
  font-weight: bold;
  margin-right: 15px;
}

큰!

저장하면 브라우저의 결과가됩니다.

단순한!

라우터 매개 변수 전달 및 읽기

때로는 Vue 앱의 URL에서 데이터를 가져와야 할 수도 있습니다. about이라는 이름의 URL 매개 변수를 전달해 봅시다.

/src/router.js를 열고  다음을 수정하십시오 :

    {
      path: '/about/:name',  // Add /:name here
      name: 'about',
      component: About
    }

다음, 방문 /src/components/About.vue의  쇼에 파일 및 템플릿 섹션을 수정 their_name의  우리가 곧 정의 할 속성을 :

<h1>Hello {{ their_name }}, this is an about page</h1>

그런 다음  템플릿 섹션 아래에 <script> 섹션을 추가 하십시오.

<script>
export default {
  name: 'About',
  data() {
    return {
      their_name: this.$route.params.name
    }
  }
}
</script>

당신은 사용 이. $의 route.params.name_of_router_param의  우리가 지정된 라우터 매개 변수 이름에 액세스 할 속성을 /src/router.js  파일을.

프로젝트를 저장하고 / about / AnyNameHere를 방문  하면 해당 값이 템플릿에 표시됩니다!