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

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

<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>
</テンプレート>

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')