如何在Laravel mix Vue Js上动态创建组件Navbar

Question

我学习和练习有关vue js，并希望创建一个组件，例如1个视图，其中包括Navbar，Footer等。但是此导航栏不会显示在索引视图中。这是我的文件夹结构：

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路由器，并使用它访问另一个页面。这是App.vue上的视图

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

        <script>
        export default {
        }
        </script>

在此是我的app.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

[如果即使更改路线（例如，从“索引”到“关于”，也要始终显示导航栏，则只需在与导航栏相同的级别上添加导航栏组件（或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>中绑定的内容，其外部的元素/组件将保留在视图中。