Laravel VueJs：`router-view` 不渲染組件

Question

我知道這個網站上有這樣的問題，但它們不能解決我的問題。 因此這個問題在這里彈出：

在我的 Laravel 5.3 和 VueJs 應用程序中， app.js文件中 Vue 的根實例指向App.vue而在App.vue我有router-view占位符。 所以我希望頁面組件在占位符內呈現，但這不會發生。

讓我顯示不同文件中的內容：

在web.php我有：

Route::get('/listing/{listing}', function(Listing $listing){

    $model = $listing->toArray();

    return view('app',['model' => $model]);


}); 

在router.js ，我有：

import Vue from 'vue';
import VueRouter from 'vue-router';
import ListingPage from '../components/ListingPage';

Vue.use(VueRouter);


    export default new VueRouter({
        mode:'history',
        routes:[

            { path: '/listing/:listing', component: ListingPage, name: 'listing' }
        ]

    });

在app.js我有：

import ListingPage from '../components/ListingPage.vue';
import  router  from './router';
import App from '../components/App.vue';

var app = new Vue({

    el: '#app',
    render: h => h(App),
    router

});

所以，當我打的網址/listing/5 ，申請去App.vue並應該使ListingPage內部組件router-view占位符。

在App.vue ，我有：

<template>
    <div>

        <div id="toolbar">
            <router-link :to="{ name: 'home' }">
                <img class="icon" src="/images/logo.png">
                <h1>vuebnb</h1>
            </router-link>
        </div>
        <router-view></router-view>
    </div>
</template>

在ListingPage.vue ，我有：

  <template>
        <div>

            <div class="container">
                <div class="heading">
                    Heading from listing page 
                </div>
                <hr>
                <div class="about">
                    <h3>About this listing page</h3>

                </div>
            </div>
    </template>

<script>

export default {

           data() {
               return {
                   index: 1
                     }
                  }
          }
</script>

但最后我只得到在內容App.vue沒有ListingPage組件所呈現的占位符內。

我怎樣才能在那里獲得正確的渲染？

編輯：

實際上，這個問題出自 Anthony Gore 所著的《 全棧 Vue.js 2 和 Laravel 5 》一書的源代碼。 源代碼可在此處的github 上獲得。 我試圖在 Chapter07 運行代碼庫。 當然，我使用Laravel 5.5.6 版本在localhost運行了必要的命令，例如composer install, npm install, npm run dev ，但最后當我點擊/listing/5類的任何 URL 時，我沒有看到從ListingPage組件呈現的任何內容。

您可以從 github 獲取代碼，也可以從此處下載以在本地主機中運行。

它不起作用的原因可能是什么以及潛在的解決方案？

Answer 1

您需要像這樣在 touter 配置中聲明您的基本路徑：

export default new VueRouter({
  mode:'history',
  routes:[

    { path: '/:listing', component: ListingPage, name: 'listing' }
  ],
  base:'/listing',
  root:'/',

});

Answer 2

我認為在"render: h => h(App)"你可以使用

components: {App},
template: '<App></App>'

然后 app.js 代碼將如下所示：

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

var app = new Vue({
    el: '#app',
    components: {App},
    template: '<App></App>',
    router
});

我希望這有效。

此致！