vue.js - Laravel VueJs : `router-view` does not render the component

Question

I know such questions are out there in this site but they do not solve my problem. Hence this question pops up here :

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:

In web.php I have :

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

    $model = $listing->toArray();

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


}); 

In router.js, I have :

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 I have :

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

});

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.

In App.vue, I have :

<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, I have :

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

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 ?

EDIT:

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.

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 ?

Answer 1

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:'/',

});