Как динамически создать компонент Navbar на Laravel mix Vue Js

Question

Я изучаю и изучаю vue js, и хочу создать компонент, подобный представлению 1, включая Navbar, Footer и др. c. Я создал индекс для первого просмотра, теперь я хочу добавить навигационную панель. Но эта панель навигации не отображается в индексном представлении. это моя структура папок:

Resource 
    *js
        *spa
            *IndexComponent
            *HeaderComponent
        *app.js
        *App.vue
        *boostrap.js

на моем IndexComponent это мой код:

     <template>
       <div class="container.is-fullhd"> 
        <section class="section">
        <div class="container is-fluid">

          <table class="table is-hoverable">
            <thead>
              <tr>
                <th><abbr title="Position">#</abbr></th>
                <th>Unit</th>
                <th><abbr title="Pengajuan">Pengajuan</abbr></th>
                <th><abbr title="Quantity">Qty</abbr></th>
                <th><abbr title="Ukuran">Size</abbr></th>
                <th><abbr title="Status Ajuan">Status Ajuan</abbr></th>
                <th><abbr title="Status Urgensi">Status Urgensi</abbr></th>
                <th>Keterangan</th>
              </tr>
            </thead>

            <tbody>
              <tr>
                <th>1</th>
                <td>Bangsal Cempaka</td>
                <td>Tisue Toilet</td>
                <td>12</td>
                <td>Buah</td>
                <td><span class="tag is-warning">Pending</span></td>
                <td><span class="tag is-light" >Non Set</span></td>  
                <td>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellat</td>
              </tr>
              <tr>
                <th>1</th>
                <td>Bangsal Cempaka</td>
                <td>Tisue Toilet</td>
                <td>12</td>
                <td>Buah</td>
                <td><span class="tag is-warning">Pending</span></td>
                <td><span class="tag is-light" >Non Set</span></td>  
                <td>Lorem ipsum dolor sit amet consectetur adipisicing elit. A cupiditate, ?</td>
              </tr>

            </tbody>
            </table>

            </div>
         </section>


        </div>
        </template>

Я использую vue маршрутизатор и использую это для доступа к другой странице. Это вид на приложение. vue

    <template>
        <router-view></router-view>
        </template>

        <script>
        export default {
        }
        </script>

В этом моем приложении. js и boostrap. js

     require('./bootstrap');

     window.Vue = require('vue');

      import VueRouter from 'vue-router';
      Vue.use(VueRouter);

      import VueAxios from 'vue-axios';
      import axios from 'axios';

      import App from './App.vue';
      Vue.use(VueAxios, axios);


      import IndexComponent from './components/spa/IndexComponent.vue';
      import HeaderComponent from './components/spa/HeaderComponent.vue';
      import FooterComponent from './components/spa/FooterComponent.vue';
      import AboutComponent from './components/spa/AboutComponent.vue';



      const routes = [
          {
              name: 'index',
              path: '/',
              component: IndexComponent
          }, 
          {
              name: 'about',
              path: '/about',
              component: AboutComponent
          },    

       ];

       const router = new VueRouter({
        mode: 'history',
           routes: routes
       });

       const app = new Vue(Vue.util.extend({ router }, App)).$mount('#app');

Так как я могу добавить эту панель навигации в быть всегда на виду, если я изменю этот индекс? Так что эта навигационная панель будет существовать при каждом просмотре.

Answer 1

Если вы хотите, чтобы Navbar отображался всегда, даже если вы измените маршрут (например, с «Индекс» на «О программе»), вы можете просто добавить свой компонент Navbar (или код HTML) в тот же самый уровень как ваш <router-view> в App.vue:

<template>
  <!-- Your navbar component/element -->
  <Navbar />
  <!-- The vue-router's binded component (e.g "Index" or "About") -->
  <router-view></router-view>
</template>

<script>
export default {
}
</script>

Таким образом, только содержимое, связанное в <router-view>, будет обновлено при навигации, элементы / компоненты вне этого будут сохранены в представлении.