トップ > Vue.js > vue-routerで同時に複数のviewを表示させる時の注意点

vue-routerで同時に複数のviewを表示させる時の注意点

Vue.js

構成

  • サイドバーは常に表示しておきたい
  • 変更されるのはコンテンツエリアのみ

の簡易な構成にしていきたいと思います

コンポーネントに分ける

2つに分ける

Vue-routerのルールでルーティングをしてくれるファイルにこのように記述

router.js

import Vue from 'vue';
import Router from 'vue-router';
import Sidebar from ’sidebarファイルがあるパス';
import Contents from ‘contentファイルがあるパス';


export default new Router({

    //urlにデフォで＃がつくので＃を消す
    mode:'history’, 
    routes:[
        {
            path:'*',
            components:{
                side:Sidebar,
                main:Mainpage
            }
        }
});

気をつける点はこの箇所

path:'*',
components:{
    side:Sidebar,
    main:Mainpage
}

通常、コンポーネントが一つの時は下記のようにcomponentと表示され、単数形になる

component:Contents