Laravel VueJs:`router-view`不渲染组件 [英] Laravel VueJs : `router-view` does not render the component

问题描述

我知道此站点中存在此类问题，但它们不能解决我的问题.因此，此问题在这里弹出:

在我的Laravel 5.3和VueJs应用程序中，app.js文件中Vue的根实例指向App.vue，在App.vue中我具有router-view占位符.因此，我希望页面组件可以在占位符内呈现，但是不会发生.

In my Laravel 5.3 and VueJs app, the root instance of Vue in app.js file points to App.vue and in App.vue I have the router-view placeholder. So I expect page components to be rendered inside the placeholder but that does not happen.

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

Let me show the contents in different files:

在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并应在router-view占位符内呈现ListingPage组件.

So when I hit the url /listing/5, the application goes to App.vue and is supposed to render the ListingPage component inside router-view placeholder.

在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组件.

But finally I only get the content in App.vue without the ListingPage component being rendered inside the placeholder.

如何在那里获得正确的渲染?

How can I get the proper rendering there ?

实际上，这个问题来自"全栈Vue.js 2和Laravel 5 "，作者是Anthony Gore.源代码位于github 此处 .我试图在Chapter07上运行代码库.当然，我使用 Laravel 5.5.6版本在localhost中运行了必要的命令，例如composer install, npm install, npm run dev，但是最后，当我点击/listing/5之类的任何URL时，看不到ListingPage组件.

Actually this questions arises out of the source code of the book 'Full-Stack Vue.js 2 and Laravel 5' by Anthony Gore. The source code is available at github here . I tried to run the codebase at Chapter07. Of course I ran the necessary commands such as composer install, npm install, npm run dev in localhost with Laravel 5.5.6 version but finally when I hit any URL like /listing/5, I do not see any content rendered from ListingPage component.

您可以从github上获取代码，也可以从此处 >在您的本地主机中运行.

You can take the code from github or you may download it from here to run in your localhost.

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

What might be the reason that it does not work and the potential solution as well ?

推荐答案

您需要像这样在touter配置中声明您的基本路径:

You need to declare your base path in touter config like this :

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

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

});

这篇关于Laravel VueJs:`router-view`不渲染组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！