집 > 기사 > 웹 프론트엔드 > Vuejs를 사용하여 라우팅을 사용자 정의하는 방법

Vuejs를 사용하여 라우팅을 사용자 정의하는 방법

php中世界最好的语言원래의: 2018-06-04 14:54:261994검색

이번에는 Vuejs를 사용하여 라우팅 정의를 수행하는 방법과 Vuejs를 사용하여 라우팅을 사용자 정의할 때 어떤 주의사항이 있는지 보여드리겠습니다. 다음은 실제 사례입니다.

우리는 구성 요소가 템플릿을 통해 템플릿을 지정할 수 있다는 것을 알고 있습니다. 또한, Vue는 렌더링 기능인 render를 사용자 정의하는 방법도 제공합니다. 렌더 사용에 대해서는 공식 문서를 읽어보세요.

다음으로 프런트엔드 라우팅 구현을 시작합니다.

쉬운 구현

먼저 vue init webpack vue-router-demo 명령을 실행하여 프로젝트를 초기화합니다(초기화 중에는 vue-router 사용을 선택하지 마세요).

먼저 페이지의 템플릿으로 사용할 레이아웃/index.vue 파일을 src 디렉터리에 생성합니다.

<template>
  <div class="container">
    <ul>
      <li><a :class="{active: $root.currentRoute === &#39;/&#39;}" href="/">Home</a></li>
      <li><a :class="{active: $root.currentRoute === &#39;/hello&#39;}" href="/hello">HelloWord</a></li>
    </ul>
    <slot></slot>
  </div></template><script>export default {  name: &#39;Layout&#39;,
};</script><style scoped>.container {  max-width: 600px;  margin: 0 auto;  padding: 15px 30px;  background: #f9f7f5;
}a.active {  color: #42b983;
}</style>

그런 다음 Components/HelloWorld.vue를 src/pages로 이동하고 코드를 수정합니다. , 위의 생성된 페이지 템플릿 패키지를 사용하세요:

<template>
  <layout>
      <!-- 原模板内容 -->
  </layout></template><script>import Layout from &#39;@/layout&#39;;export default {  name: &#39;HelloWorld&#39;,  components: {
    Layout,
  },  // ...};</script><!-- ... -->

물론 사용자가 존재하지 않는 경로를 입력할 때 인터페이스 역할을 하려면 404 페이지도 추가해야 합니다.

마지막 단계는 가장 중요한 단계로, main.js를 다시 작성하고 페이지 URL에 따라 렌더링 구성 요소를 동적으로 전환합니다.

라우팅 매핑 정의:

// url -> Vue Componentconst routes = {  &#39;/&#39;: &#39;Home&#39;,  &#39;/hello&#39;: &#39;HelloWorld&#39;,
};

VueComponent 계산 속성을 추가하고 window.location.pathname을 기반으로 필수 구성 요소를 도입합니다.

const app = new Vue({  el: &#39;#app&#39;,
  data() {    return {      // 当前路由
      currentRoute: window.location.pathname,
    };
  },  computed: {
    ViewComponent() {      const currentView = routes[this.currentRoute];      /* eslint-disable */
      return (
        currentView
          ? require(&#39;./pages/&#39; + currentView + &#39;.vue&#39;)
          : require(&#39;./pages/404.vue&#39;)
      );
    },
  },
});

렌더링 로직을 구현하기 위해 렌더 함수는 VNode를 생성하는 함수인 createElement 매개변수를 제공합니다. 동적으로 도입된 컴포넌트를 직접 전달하여 렌더링을 수행할 수 있습니다.

const app = new Vue({  // ...
  render(h) {    // 因为组件是以 es module 的方式引入的，
    // 此处必须使用 this.ViewComponent.default 属性作为参数
    return h(this.ViewComponent.default);
  }
});

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!