Vueはタブルーティング切り替えコンポーネントのメソッド例を実装します

序文

この記事では、vue に付属している vue-router.js ルーティングを使用してページング切り替え機能を実装する方法を紹介します。詳細な実装コードを見てみましょう。

実装イメージは以下のとおりです

以下は実装コードです

css:

*{
            マージン: 0;
            パディング: 0;
        }
        #アプリ ul{
            幅: 300ピクセル;
            高さ: 30px;
            リストスタイル: なし;
        }
        #app>ul>li{
            幅: 100ピクセル;
            高さ: 30px;
            フロート: 左;
        }

html:

<div id="アプリ">
    <ul>
        <li>
            <router-link to="/dyy">最初のページ</router-link>
        </li>
        <li>
            <router-link to="/dey">2 ページ目</router-link>
        </li>
        <li>
            <router-link to="/dsy">ページ 3</router-link>
        </li>
    </ul>
    <ルータービュー></ルータービュー>
</div>
 
<テンプレートid="DyyDay">
    <div>
        <ul>
            <li>ニュース 01</li>
            <li>ニュース02</li>
            <li>ニュース03</li>
        </ul>
    </div>
</テンプレート>
 
<テンプレート id="デイデイ">
    <div>
        <ul>
            <li>メッセージ 01</li>
            <li>メッセージ 02</li>
            <li>メッセージ 03</li>
        </ul>
    </div>
</テンプレート>
 
<テンプレート id="DsyDay">
    <div>
        <h1>ホーム</h1>
        <router-link to="/dsy/home1">home1</router-link>
        <router-link to="/dsy/home2">home2</router-link>
        <ルータービュー></ルータービュー>
    </div>
</テンプレート>
 
<テンプレートid="home1">
    <h1>ただいま1</h1>
</テンプレート>
 
<テンプレートid="home2">
    <h1>ただいま2</h1>
</テンプレート>

jsです。

Dyy={template:`#DyyDay`} とします。
    Dey={template:`#DeyDay`}; とします。
    Dsy={template:`#DsyDay`}; とします。
    home1 を {template:`#home1`} とします。
    home2 を {template:`#home2`} とします。
    ルーター = new VueRouter({
        ルート:[
            { パス:'/'、リダイレクト:"dyy" },
            { パス:'/dyy',コンポーネント:Dyy },
            { パス:'/dey',コンポーネント:Dey },
            { パス:'/dsy',コンポーネント:Dsy,
                子供たち：[
                    {パス:'/dsy/home1',コンポーネント:home1},
                    {パス:'/dsy/home2'、コンポーネント:home2}
                ]
            }]
    });
    アプリを新しいVue({
        ルーター
    }).$mount('#app')

要約する

Vue のタブルーティング切り替えコンポーネントの実装に関するこの記事はこれで終わりです。Vue タブルーティング切り替えコンポーネントの関連コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: