Laravel VueJs：“router-view”不渲染组件

我知道这个网站上有这样的问题，但它们并不能解决我的问题。因此这里出现了这个问题：

在我的 Laravel 5.3 和 VueJs 应用程序中，Vue 的根实例位于app.js文件指向App.vue and in App.vue我有router-view占位符。因此，我希望页面组件能够在占位符内呈现，但这并没有发生。

让我显示不同文件中的内容：

In web.php我有 ：

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

    $model = $listing->toArray();

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


}); 

In 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' }
        ]

    });

In 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占位符。

In 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>

In 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组件在占位符内呈现。

我怎样才能在那里得到正确的渲染？

EDIT:

其实这个问题是从这本书的源代码中产生的'全栈 Vue.js 2 和 Laravel 5 https://www.packtpub.com/application-development/full-stack-vuejs-2-and-laravel-5”安东尼·戈尔着。源代码可以在github上找到here https://github.com/PacktPublishing/Full-Stack-Vue.js-2-and-Laravel-5。我尝试运行 Chapter07 的代码库。当然，我运行了必要的命令，例如composer install, npm install, npm run dev in localhost with Laravel 5.5.6 版本但最后当我点击任何网址时/listing/5，我没有看到任何呈现的内容ListingPage成分。

您可以从 github 获取代码，也可以从以下位置下载here https://drive.google.com/open?id=13HhTlcUZR-Xc8_M69VfqZf35WqVUor_O在您的本地主机中运行。

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

您需要在touter配置中声明您的基本路径，如下所示：

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

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

});