ヘッダーフッターを実装したい Vue.js

Question

現在Vue.jsの学習をしていてVye.jsチュートリアル
を参考にCLIを基礎にして学習しています。

次にVue.jsで共通ヘッダーを作るを参考にApp.vueにヘッダーフッターを追加させました。

<template>
  <div id="app">
    <app-header></app-header>
    <router-view></router-view>
    <app-footer></app-footer>
  </div>
</template>

<script>
import Header from './components/Header/Header.vue';
import Footer from './components/Footer/Footer.vue';

export default {
  name: 'app',
  components: {
    'app-header': Header,
    'app-footer': Footer
  }
};
</script>

<style>
  body {
    margin: 0px;
  }

  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    width: 375px;
    height: 667px;
  }
</style>

ただこの表示の仕方だとすべてのページに反映しています、反映させたくないページ
が出てしまった時はどのようにソースを書いていけばいいでしょうか。
ご教授お願いいたします。

解決策として

<div class="home"> <app-header></app-header> <div class="home"> <button class="hogeBotann" @click="onClickStartButton()"></button> </div> <app-footer></app-footer> </div> <script> import Header from '../Header/Header.vue'; import Footer from '../Footer/Footer.vue'; export default { name: 'Title', methods: { onClickStartButton: function () { this.$router.push('hoge'); } }, components: { 'app-header': Header, 'app-footer': Footer } }; </script>

とHTMLに直接<app-header></app-header>記載したのですがもっとシンプルにできますでしょうか？

Comments

[karamarimo]

「すべてのページに反映しています」「反映させたくないページ」とは具体的に何が反映されるのでしょうか。

[harunasan]

すいません遅くなりました、ヘッダーフッターがすべてのページにできてしまうのでログインページなどヘッダーフッターを省きたいと思っています、最新で回答がありますが、ルートをさらに作るとゆう考え方なのでしょうか？

Answer 1

$route.pathや$route.nameで現在のルートが取得できますので、v-ifを用いてヘッダーとフッターの表示を制御すればいいと思います。

DEMO(codesandbox)

template

		<my-header v-if="$route.name !== 'Login'"></my-header>

$route.nameが何で決まるかというと、Routerのコンストラクタのオプションroutesの各 route の nameフィールドです。

router/index.js

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    },
    {
      path: '/login',
      name: 'Login',
      component: Login
    }
  ]
})

Comments

[harunasan]

おかげさまでヘッダーフッターを実装できました、vue.jsの流れが少しわかった気がします、
ありがとうございました。
<template>
<div id="app">
<my-header v-if="$route.name !== 'Title'"></my-header>
<router-view></router-view>
<my-Footer v-if="$route.name !== 'Title'"></my-Footer>
</div>
</template>

<script>
import Header from '@/components/Header/Header';
import Footer from '@/components/Footer/Footer';

export default {
name: 'app',
components: {
MyHeader: Header,
MyFooter: Footer
}
};
</script>

Answer 2

ヘッダーのあるページのコンポーネント、ないページのコンポーネントを作って、そこをrouterで呼ぶというのは？

Comments

[harunasan]

すません流れがよくわからないのですが、
index.js→main.js→App.vue→各自ページとゆう流れでいいんですよね？
考え方的にmain.jsに追加で記載していくのでしょうか？

ルート
import Vue from 'vue';
import Router from 'vue-router';

import hoge from '@/components/hoge/hoge';
import hoge2 from '@/components/hoge2/hoge2';
import hoge3 from '@/components/hoge3/hoge3;

Vue.use(Router);

export default new Router({
routes: [
{path: '/hoge', component: hoge},
{path: '/hoge2', component: hoge2},
{path: '/hoge3', component: hoge3},
// root
{path: '/', component: Title}
]
});

main.js

import Vue from 'vue';
import App from './App';
import router from './router';

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: {App},
template: '<App/>'
});

[harunasan]

解決策として
<div class="home">
<app-header></app-header>
<div class="home">
<button
class="hogeBotann"
@click="onClickStartButton()"></button>
</div>
<app-footer></app-footer>
</div>

<script>
import Header from '../Header/Header.vue';
import Footer from '../Footer/Footer.vue';
export default {
name: 'Title',
methods: {
onClickStartButton: function () {
this.$router.push('hoge');
}
},
components: {
'app-header': Header,
'app-footer': Footer
}
};
</script>
とHTMLに直接<app-header></app-header>記載したのですがもっとシンプルにできますでしょうか？