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-routerGitHub 사용
다음과 같이 GitHub에서 저장소를 복제 할 수 있습니다.
git clone https://github.com/vuejs/vue-router.git node_modules/vue-router
cd node_modules/vue-router
npm install
npm run buildvue-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에 마우스를 올리면 탐색이 변경되는 것을 볼 수 있습니다.
