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
});

我希望这有效。

此致！