<routeur-view> url change in browser status bar but page content is not updated

Question

The first Example.vue is well loaded, the links are ok, when I click on "goto pageA" (or pageB) the URL bar in the browser changes and displays the correct url localhost/tlara/public/PageA (or PageB), but the content of the page is not updated.
The issue occurs for all .vue .

vuejs 2 + [email protected] Official router for Vue.js 2

resources/js/app.js

import Vue from 'vue';
window.Vue=Vue;

require  ('./bootstrap');

import VueRouter from 'vue-router'

Vue.use(VueRouter);

const appRoutes=[


 { path : '/root',
   component : require('./components/PageRoot.vue') , 
   name : 'pageRoot'
 },

 { path : '/pageA',
   component :  require('./components/PageA.vue'), 
   name : 'pageA'
 },

 { path : '/pageB',
   component : require('./components/PageB.vue'), 
   name : 'pageB'
 }, 



];


const router=new VueRouter({
    mode : "history",
    base : window.tlara.APP_URL_BASE_VUEJS, /* ="/tlara/public/" */
    routes : appRoutes
});



const app = new Vue({

    el: '#app',
    router,
    render: r => r(require('./components/Example.vue').default), 

    mounted : function() {
        console.log('here ',this.$route);
    }

});

resources/views/vue.blade.php (landing page)

    <!DOCTYPE html>
    <html>
    <head>
       <meta charset="utf-8">
       <link rel="stylesheet" href="{{ asset('css/app.css') }}">
       <title>Vue Examples</title>

    </head>
    <body>

       <div id="app">
       <router-view></router-view>
       </div>

        <script>
            window.tlara={
                basePath           : "{{$basePath}}", 
                APP_URL            : "{{$APP_URL}} ",
                APP_URL_BASE_VUEJS : "{{$APP_URL_BASE_VUEJS}}",
            }
        </script>
        <script src="js/app.js"></script>
        </body>
    </html>

 >resources/components/Example.vue  

<template>
    <div>
        <H1>EXAMPLE</H1>
        <router-link :to="{name : 'pageRoot' }">Go to Root</router-link>
        <br>
        <router-link :to="{name : 'pageA' }">Go to pageA</router-link>
        <br>
        <router-link :to="{name : 'pageB' }">Go to pageB</router-link>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

resources/js/components/PageA.vue (pageB.vue , Example.vue, pageRoot.vue are similar except H1 tag)

<template>
 <div>
     <H1>Page A</H1>
     <br>
     <router-link :to="{name : 'root' }">Go to Root</router-link>
     <br>
     <router-link :to="{name : 'pageA' }">Go to pageA</router-link>
     <br>
     <router-link :to="{name : 'pageB' }">Go to pageB</router-link>
 </div>
</template>

<script>

     export default {

     }

</script>

Eric Eric · Accepted Answer · 2020-01-11T18:33:09

ok... i remove <router-view> from resources/views/vue.blade.php (landing page) and I put it in Example.vue and it's working!

resources/views/vue.blade.php (landing page)

<template>
    <div>
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

<routeur-view> url change in browser status bar but page content is not updated

1 Answers