現在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>記載したのですがもっとシンプルにできますでしょうか?
回答2件
あなたの回答
tips
プレビュー