【vue.js】router-viewについて

(main.jsに設定している)App.vueファイルの中にrouter-viewを記述する。 コンポーネントなどを表示する流れとして main.js→App.vue→router-view(App.vue内に記述) router.js内で指定しているpathとコンポーネントの組み合わせで動的にコンポーネントを切り替える。

#router.js
#一部省略

export default new Router({
  mode: history,
  routes: [
    { path: "/", component: Home }
  ]
})

ここでは"/"にアクセスがきた際、Homeとしてimportしているコンポーネントを表示する

名前付きviewについて

router-viewに名前をつけて複数のコンポーネントを一つの画面に描写できる。

#router.js
#一部省略

export default new Router({
  mode: history,
  routes: [
    { path: "/", 
      components: {
        default: Home
        header: HeaderHome
      }
    }
  ]
})

#App.vue
<template>
  <div>
    <router-view name="header"></router-view>
    <router-view></router-view>
  </div>
</template>

component→componentsにする
componentsの値にオブジェクトを取る
デフォルトのコンポーネントとApp.vueで指定したnameの値のコンポーネントを設定する。