VueJS-라우팅

VueJS에는 내장 라우터 기능이 없습니다. 설치하려면 몇 가지 추가 단계를 따라야합니다.

CDN에서 직접 다운로드

vue-router의 최신 버전은 https://unpkg.com/vue-router/dist/vue-router.js

Unpkg.com은 npm 기반 cdn 링크를 제공합니다. 위 링크는 항상 최신 버전으로 업데이트됩니다. 우리는 그것을 다운로드하고 호스팅 할 수 있으며 다음과 같이 vue.js와 함께 스크립트 태그와 함께 사용할 수 있습니다.

<script src = "/path/to/vue.js"></script>
<script src = "/path/to/vue-router.js"></script>

NPM 사용

다음 명령을 실행하여 vue-router를 설치하십시오.

npm  install vue-router

GitHub 사용

다음과 같이 GitHub에서 저장소를 복제 할 수 있습니다.

git clone https://github.com/vuejs/vue-router.git node_modules/vue-router
cd node_modules/vue-router
npm install
npm run build

vue-router.js를 사용한 간단한 예제부터 시작하겠습니다.

Example

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
      <script type = "text/javascript" src = "js/vue-router.js"></script>
   </head>
   <body>
      <div id = "app">
         <h1>Routing Example</h1>
         <p>
            <router-link to = "/route1">Router Link 1</router-link>
            <router-link to = "/route2">Router Link 2</router-link>
         </p>
         <!-- route outlet -->
         <!-- component matched by the route will render here -->
         <router-view></router-view>
      </div>
      <script type = "text/javascript">
         const Route1 = { template: '<div style = "border-radius:20px;background-color:cyan;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 1</div>' }
         const Route2 = { template: '<div style = "border-radius:20px;background-color:green;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 2</div>' }
         const routes = [
            { path: '/route1', component: Route1 },
            { path: '/route2', component: Route2 }
         ];
         const router = new VueRouter({
            routes // short for `routes: routes`
         });
         var vm = new Vue({
            el: '#app',
            router
         });
      </script>
   </body>
</html>

Output

라우팅을 시작하려면 vue-router.js 파일을 추가해야합니다. 코드 가져 오기https://unpkg.com/vue-router/dist/vue-router.js vue-router.js 파일에 저장합니다.

스크립트는 다음과 같이 vue.js 뒤에 추가됩니다.

<script type = "text/javascript" src = "js/vue.js"></script>
<script type = "text/javascript" src = "js/vue-router.js"></script>

본문 섹션에는 다음과 같이 정의 된 라우터 링크가 있습니다.

<p>
   <router-link   to = "/route1">Router Link 1</router-link>
   <router-link    to = "/route2">Router Link 2</router-link>
</p>

<router-link>사용자에게 표시 할 HTML 콘텐츠를 탐색하는 데 사용되는 구성 요소입니다. to 속성은 대상, 즉 표시 할 내용이 선택 될 소스 파일입니다.

위의 코드에서는 두 개의 라우터 링크를 만들었습니다.

라우터가 초기화되는 스크립트 섹션을 살펴보십시오. 다음과 같이 생성 된 두 개의 상수가 있습니다.

const  Route1 = { template: '<div style = "border-radius:20px;background-color:cyan;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 1</div>' };
const Route2 = { template: '<div style = "border-radius:20px;background-color:green;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 2</div>' }

라우터 링크를 클릭 할 때 표시되어야하는 템플릿이 있습니다.

다음은 URL에 표시 될 경로를 정의하는 route const입니다.

const routes = [
   { path: '/route1', component: Route1 },
   { path: '/route2', component: Route2 }
];

경로는 경로와 구성 요소를 정의합니다. 경로 즉/route1 사용자가 라우터 링크를 클릭하면 URL에 표시됩니다.

구성 요소는 표시 할 템플릿 이름을 사용합니다. 경로의 경로는 속성에 대한 라우터 링크와 일치해야합니다.

예 : <router-link to = ”path here”> </ 라우터-링크>

다음으로 인스턴스는 다음 코드를 사용하여 VueRouter에 생성됩니다.

const router = new VueRouter({
   routes // short for `routes: routes`
});

VueRouter 생성자는 경로를 매개 변수로 사용합니다. 라우터 개체는 다음 코드를 사용하여 기본 vue 인스턴스에 할당됩니다.

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

예제를 실행하고 브라우저에서 디스플레이를 확인합니다. 라우터 링크를 검사하고 확인하면 다음 스크린 샷과 같이 활성 요소에 클래스가 추가되는 것을 알 수 있습니다.

추가 된 클래스는 class = “router-link-exact-active router-link-active”. 활성 링크는 위 스크린 샷과 같이 클래스를 가져옵니다. 주목해야 할 또 다른 점은 <router-link>가 태그로 렌더링된다는 것입니다.

라우터 링크 용 소품

<router-link>에 전달할 속성을 더 살펴 보겠습니다.

...에

이것은 <router-link>에 주어진 대상 경로입니다. 클릭하면 to 값이 내부적으로 router.push ()에 전달됩니다. 값은 문자열 또는 위치 개체 여야합니다. 객체를 사용할 때 예 2와 같이 바인딩해야합니다.

e.g. 1:  <router-link to = "/route1">Router Link 1</router-link>
renders as
<a href = ”#/route”>Router Link </a>
e.g. 2:  <router-link v-bind:to = "{path:'/route1'}">Router Link 1</router-link>
e.g. 3: <router-link v-bind:to =
   "{path:'/route1', query: { name: 'Tery' }}">Router Link 1</router-link>//router link with query string.

다음은 예를 들어 3의 출력입니다.

URL 경로에서 name = Tery는 쿼리 문자열의 일부입니다. 예 : http : //localhost/vueexamples/vue_router.html#/route1? name = Tery

바꾸다

라우터 링크에 교체를 추가하면 router.replace() 대신에 router.push(). 바꾸기를 사용하면 탐색 기록이 저장되지 않습니다.

Example

<router-link v-bind:to = "{path:'/route1', query: { name: 'Tery' }}"   replace>Router Link 1</router-link>

추가

<router-link> <router-link>에 추가를 추가하면 경로가 상대 경로가됩니다.

경로가 / route1 인 라우터 링크에서 라우터 링크 경로 / route2로 이동하려는 경우 브라우저에 경로가 / route1 / route2로 표시됩니다.

Example

<router-link v-bind:to = "{ path: '/route1'}" append>Router Link 1</router-link>

꼬리표

현재 <router-link>는 태그로 렌더링됩니다. 다른 태그로 렌더링하려면 tag =”tagname”을 사용하여 동일하게 지정해야합니다.

Example

<p>
   <router-link v-bind:to = "{ path: '/route1'}" tag = "span">Router Link 1</router-link>
   <router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>

태그를 span으로 지정했으며 이것이 브라우저에 표시되는 것입니다.

현재 표시되는 태그는 스팬 태그입니다. 탐색을 위해 라우터 링크를 클릭 할 때 클릭이 계속되는 것을 볼 수 있습니다.

현역

기본적으로 라우터 링크가 활성 상태 일 때 추가되는 활성 클래스는 라우터 링크 활성입니다. 다음 코드에 표시된 것과 동일하게 설정하여 클래스를 덮어 쓸 수 있습니다.

<style>
   ._active{
      background-color : red;
   }
</style>
<p>
   <router-link v-bind:to = "{ path: '/route1'}" active-class = "_active">Router Link 1</router-link>
   <router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>

사용되는 클래스는 active_class =”_active”입니다. 브라우저에 표시되는 출력입니다.

정확한 활성 클래스

적용되는 기본 exactactive 클래스는 router-link-exact-active입니다. 정확한 활성 클래스를 사용하여 덮어 쓸 수 있습니다.

Example

<p>
   <router-link v-bind:to = "{ path: '/route1'}" exact-active-class = "_active">Router Link 1</router-link>
   <router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>

이것이 브라우저에 표시되는 것입니다.

행사

현재 라우터 링크의 기본 이벤트는 클릭 이벤트입니다. event 속성을 사용하여 동일하게 변경할 수 있습니다.

Example

<router-link v-bind:to = "{ path: '/route1'}" event = "mouseover">Router Link 1</router-link>

이제 라우터 링크 위로 마우스를 가져 가면 다음 브라우저와 같이 탐색됩니다. 라우터 링크 1에 마우스를 올리면 탐색이 변경되는 것을 볼 수 있습니다.