Vuejsカスタムルーティングの使い方

今回は、Vuejs を使用してルーティングを定義する方法と、Vuejs を使用してルーティングをカスタマイズする際の注意事項について説明します。実際のケースを見てみましょう。

単一ファイル コンポーネントの場合、テンプレートはテンプレート タグを通じて指定できることがわかっています。さらに、Vue では、レンダリング関数 render をカスタマイズする方法も提供します。 render の使用については、公式ドキュメントをお読みください。

次に、フロントエンドルーティングの実装を開始します。

簡単な実装

まず、vue init webpack vue-router-demo コマンドを実行してプロジェクトを初期化します (初期化中に vue-router の使用を選択しないことに注意してください)。

まず、ページのテンプレートとして使用するlayout/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 = {  '/': 'Home',  '/hello': 'HelloWorld',
};

VueComponent 計算プロパティを追加し、window.location.pathname に基づいて必要なコンポーネントを導入します。

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

レンダリングロジックを実装するために、render関数はVNodeを生成する関数であるパラメータcreateElementを提供します。これに動的に導入されたコンポーネントを直接渡してレンダリングを実行できます。

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

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

jsの基本的な改善学習のための操作DOMオブジェクトスタイル

jsの基本的な改善学習のための3つの組み込みオブジェクト

jsの基本的な改善学習のための基本的なデータ型

以上がVuejsカスタムルーティングの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。