HTML で vue-router を使用するサンプルコード

vue と vue-router の紹介

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

完全な例

<!DOCTYPE html>
<html>
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <meta http-equiv="X-UA-compatible" content="ie=edge">
    <title>ドキュメント</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<本文>
    <div id="アプリ">
        <h1>こんにちは！</h1>
        <p>
          <!-- ナビゲートするには router-link コンポーネントを使用します。 -->
          <!-- `to` 属性を渡してリンクを指定します。 -->
          <!-- <router-link> はデフォルトで `<a>` タグとしてレンダリングされます -->
          <router-link to="/hash1">com1 に切り替える</router-link>
          <router-link to="/hash2">com2 に切り替える</router-link>
        </p>
        <!-- ルーティング終了 -->
        <!-- ルートに一致するコンポーネントがここでレンダリングされます -->
        <ルータービュー></ルータービュー>
        <!-- router-link のその他の属性: -->
        <!-- replace 属性が設定されている場合、クリック時に router.push() ではなく router.replace() が呼び出されます。
            ナビゲーション後に履歴記録は残りません。 -->
        <!-- <router-link :to="{ path: '/abc'}" replace></router-link> -->
        <!-- 場合によっては、<router-link> を <li> などの何らかのタグにレンダリングしたいことがあります。 そのため、タグを指定するためにタグ プロパティ クラスを使用し、クリックをリッスンしてナビゲーションをトリガーします。 -->
        <!-- <router-link to="/foo" tag="li">foo</router-link> -->
        <!-- active-class はリンクがアクティブ化されたときに使用される CSS を設定します -->
        <!-- event はナビゲーションをトリガーするために使用できるイベントを宣言します。文字列または文字列を含む配列にすることができます。 -->
    </div>
</本文>
<スクリプト>
    // 1. (ルーティング) コンポーネントを定義します。
    const com1 = { テンプレート: '<div>ルート 1</div>' }
    const com2 = { テンプレート: '<div>ルート 2</div>' }
    
    // 2. ルートを定義する // 各ルートはコンポーネントにマップする必要があります。 「コンポーネント」はVue.extend()を通じて拡張できる
    // 作成するコンポーネント コンストラクター、または単なるコンポーネント構成オブジェクト。
    定数ルート = [
        { パス: '/hash1'、コンポーネント: com1 },
        { パス: '/hash2'、コンポーネント: com2 }
    ]
    
    // 3. ルーターインスタンスを作成し、`routes` 設定を渡す const router = new VueRouter({
        ルート // (省略形) ルートと同等: ルート
    })
    
    // 4. ルートインスタンスを作成してマウントします。
    // アプリケーション全体にルーティング機能を持たせるために、ルーター構成パラメータを通してルートを挿入します。const app = new Vue({
        ルーター
    }).$mount('#app');//el は自動マウント、mount は手動マウント（遅延）
    
</スクリプト>
</html>

これで、HTML で vue-router を使用するサンプルコードに関するこの記事は終了です。HTML で vue-router を使用する方法に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: 数ステップでサイバーパンク2077風の視覚効果を実現するCSS

>>: CSS でのシングル div 描画テクニックの実装