제 4장 라우터를 Vue.js 플러그인으로 만들기

4. 라우터를 Vue.js 플러그인으로 만들기

나만의 라우터 만들기 시리즈 의 4부 중 4부
알렉스 조버 모랄레스씀

지금까지 구성 요소에 라우터를 구축하고 앱 소스 코드 내에서 히스토리 모듈을 구축했습니다. 문제는 라우터가 앱에 연결되어 있다는 점입니다. 특히 AppRouter 구성 요소 내에 경로가 정의되어 있기 때문 입니다.

이는 구성 요소에서 경로를 이동하고 매개변수로 전달하여 개선할 수 있습니다. 그러나 여전히 개발자는 AppRouter 구성 요소와 history.js 모듈을 가져와서 사용해야 합니다.

Vue.js 플러그인 을 만들어 개선하고 단순화할 수 있습니다. 그러면 앱 간에 라우터를 100% 재사용할 수 있고 최종 개발자가 더 쉽게 사용하고 사용자 지정할 수 있습니다.

Vue.js 플러그인을 만드는 것은 처음부터 할 필요가 없습니다. 이미 가지고 있는 구성 요소와 모듈을 사용하여 만들 수 있습니다. 즉, 플러그인을 만드는 프로세스가 점진적일 수 있으며 필요할 때까지 지연할 수 있습니다. 우리의 경우 이미 AppRouter.vue 구성 요소와 history.js 모듈이 있습니다.

라우터용 Vue.js 플러그인을 만드는 데 사용하는 방법을 살펴보겠습니다.

라우터 플러그인 만들기

이제부터 라우터를 “그냥 작동 하고” npm 에서 설치할 수 있는 외부 패키지로 간주합니다. 그러나 지금은 플러그인을 나머지 응용 프로그램과 분리하기 위해 AppRouter.vue 구성 요소를 이동할 위치 plugin 이라는 폴더를 만드는 것이 좋습니다.

Vue.js 플러그인 구조는 install(Vue, options) 함수가 있는 객체여야 합니다. 이 함수는 플러그인을 등록할 때 Vue.use(AnyPlugin)를 통해 실행됩니다.

이 install 함수는 두 개의 매개변수를 사용합니다.

• Vue: 필요에 따라 조작할 수 있는 전역 Vue 객체.
• options: Vue.use함수 호출에 대한 두 번째 인수로 전달된 옵션 입니다.

그런 다음 라우터 플러그인의 진입점 으로 plugin/index.js 파일을 생성해 보겠습니다.

// plugin/index.js
export default {
  install(Vue, options) {}
};

Vue.js 플러그인의 install 기능 내에서 전역 범위에서 사용할 수 있는 몇 가지 작업을 등록 할 수 있습니다.

• 전역 구성 요소, 지시문, 전환 등을 등록합니다.
• 구성 요소 옵션을 추가하려면 전역 믹스인을 추가하세요.
• Vue 클래스에 정적 메서드 또는 속성 추가
• Vue.prototype 인스턴스 메서드 또는 속성 추가

가장 먼저 할 수 있는 일은 AppRouter.vue 구성 요소를 등록하는 것입니다. 그런 식으로 App.vue에서 제거할 수 있지만 현재 전역적으로 등록되어 있으므로 <app-router></app-router>로 계속 사용할 수 있습니다.

// plugin/index.js
import AppRouter from "./AppRouter";
export default {
  install(Vue, options) {
    Vue.component("AppRouter", AppRouter);
  }
};

Vue 인스턴스 확장

history.js 모듈도 있다는 것을 기억 하십니까? 그 논리는 라우터에 묶여 있으며 최종 사용자가 라우터의 존재를 모른다면 좋을 것입니다. 따라서 history.js모듈을 plugin 폴더 로 이동하여 시작합니다.

하지만 이제 문제가 있습니다. history.js 모듈은 App.vue뿐만 아니라 AppRouter.vue에서도 사용됩니다. 따라서 App.vue는 여전히 액세스해야 하므로 이동하는 것만으로는 충분하지 않습니다.
이를 해결하기 위해 install 함수에 $pushRoute 인스턴스 메소드를 추가할 수 있습니다.

// plugin/index.js
import AppRouter from "./AppRouter";
import { push } from "./history";
export default {
  install(Vue, options) {
    Vue.component("AppRouter", AppRouter);

    // Set $pushRoute to the push function
    Vue.prototype.$pushRoute = push;
  }
};

달러 $ 접두사 를 눈치채 셨나요? 이는 Vue.js 커뮤니티에서 인스턴스 메서드와 속성을 정의하기 위해 사용하는 규칙입니다. Vue.js 스타일 가이드 에서도 찾을 수 있습니다.

$pushRoute 메서드 를 추가하여 App.vue 와 history.js 사이의 종속성을 제거했습니다.

AppRouter 구성 요소가 전역적으로 등록되고 $pushRoute 메서드가 Vue 인스턴스에 추가되었기 때문에, App.vue로 이동하여 가져오기, 구성 요소 및 push 참조를 제거하고 종속성을 정리할 수 있습니다.

<!-- App.vue -->
<template>
  <div>
    <button @click="goTo('/articles')">Go to Articles</button>
    <button @click="goTo('/')">Go to Home</button>
    <app-router></app-router>
  </div>
</template>
<script>
export default {
  methods: {
    goTo(route) {
      this.$pushRoute(route);
    }
  }
};
</script>

우리는 여전히 라우터 플러그인에 경로를 전달해야 하며 이를 위한 몇 가지 옵션이 있습니다.

충분히 궁금하다면 공식 vue-router 에서 beforeCreate 믹스인 을 사용 하여 인스턴스 옵션에서 router 작업에 액세스 하는지 확인할 수 있습니다.

Vue.mixin({
  beforeCreate() {
    this._router = this.$options.router;
    // ...
  }
});

이렇게 하면 루트 Vue.js 인스턴스에 router 옵션으로 전달합니다 .

const router = new Router({
  "/": SomeComponent
});

new Vue({
  el: "#app",
  router,
  render: h => h(App)
});

그러나 여기서는 더 간단한 접근 방식을 사용할 것입니다. 플러그인 옵션을 사용하여 플러그인에 경로를 전달한 다음 install 함수 내의 인스턴스 속성에 저장할 수 있습니다.

// plugin/index.js
import AppRouter from "./AppRouter";
import { push } from "./history";
export default {
  install(Vue, options) {
    Vue.component("AppRouter", AppRouter);
    // Add the routes to the $routes instance property
    Vue.prototype.$routes = options.routes;
    Vue.prototype.$pushRoute = push;
  }
};

마지막으로 AppRouter.vue의 computed 속성인 routedComponent 를 업데이트하여 $routes 인스턴스 속성에서 올바른 경로를 가져옵니다.

// AppRouter.vue
export default {
  computed: {
    routedComponent() {
      return this.$routes[this.current];
    }
  }
};

플러그인 사용

라우터 플러그인을 사용할 준비가 되었으며 앱에서 완전히 분리되었습니다. 이제 사용할 때입니다.
Vue.js 플러그인은 Vue.use(Plugin)를 사용하여 호출 해야 하며 라우터 플러그인에는 routes 옵션이 필요합니다. 그런 다음 앱의 루트 파일로 이동하여 적절하게 업데이트합니다.

// index.js
import Vue from "vue";
import App from "./src/App";
import AppRouter from "./plugin";
import HomePage from "./src/HomePage";
import ArticlesPage from "./src/ArticlesPage";

// Create routes objects
const routes = {
  "/": HomePage,
  "/articles": ArticlesPage
};

// Use the plugin
Vue.use(AppRouter, {
  routes
});

// ...

프로젝트를 실행하면 이전에 작업했던 것과 똑같이 작동해야 합니다.

라우터 후크 추가

라우터를 플러그인으로 사용하면 더 많은 옵션과 기능을 추가할 수 있습니다. 예를 들어, 라우터 후크가 다른 수준에 있는 것이 일반적입니다.

이러한 후크는 경로가 변경될 때 특정 지점에서 트리거되는 기능입니다. 예를 들어 경로 변경 전이나 후에 있을 수 있으므로 사용자가 해당 지점에서 다른 작업을 수행할 수 있습니다.

단순함을 위해 history.js 모듈에서 사용할 수 있는 listeners 변수가 하나만 있으므로 경로 변경 후에 전역 후크만 추가합니다. hook 라우터 옵션을 사용하여 라우트 변경이 발생할 때 어디로 오고 가는지 기록하는 후크를 정의해 보겠습니다.

// index.js
// ...
Vue.use(AppRouter, {
  routes,
  hook: (to, from) => console.log(to, from)
});
// ...

리스너 콜백이 to 및 from 매개변수를 수신한다는 것을 기억하십시오. 이것이 우리가 액세스할 수 있는 이유입니다. 그런 다음 install 라우터 플러그인의 listen 기능에서 history.js 모듈 의 기능을 사용 하여 경로 변경 사항을 알릴 수 있습니다.

import AppRouter from "./AppRouter";
import { listen, push } from "./history";
export default {
  install(Vue, options) {
    Vue.component("AppRouter", AppRouter);
    Vue.prototype.$routes = options.routes;
    Vue.prototype.$pushRoute = push;

    // Add a listener if the hook option is provided
    if (options.hook) {
      listen(options.hook);
    }
  }
};

options.hook 충돌을 방지하기 위해 속성 의 존재를 확인하는 것을 잊지 마십시오.

마무리

아주 간단하면서도 완전한 라우터 플러그인을 처음부터 만들었습니다. 따라했다면 라우터의 기본 사항과 내부에서 작동하는 방식을 이해했을 것입니다.

여러분도 마음을 열 수 있기를 바라며, 우리가 만든 라우터에 다음과 같은 더 많은 기능을 추가할 수 있습니다.

• 가드 구현
• 해시 모드 허용

• 경로를 통해 선언적으로 탐색하기 위한 전역 구성 요소 제공

• …

여기 에서 이 기사 의 코드와 데모를 찾을 수 있습니다 .