Vue component is rendring but page is blank.I can see the code by inspectinng the page

Question

i'm making static site with laravel and vue.js. I make

Route::get('/', function () {
    return view('layouts.master');
});

this route enter code hereto load home page and

import VueRouter from 'vue-router'
import home from './components/home.vue'
import About from './components/About.vue'
import Contact from './components/Contact.vue'

Vue.use(VueRouter)

const routes = [

    { path: '/about', component: About },
    {
        path: '/',
        component: home
    },
    {
        path: '/contact',
        component: Contact
    }

]

const router = new VueRouter({
    mode: 'history',
    routes, // short for `routes: routes`,

})

its my appp.js code. First time when page loaded on localhost:8000 the home page works fine but when i click to somme other route and come back it does not work it shows me blank page . but i can see html page by inspecting.

Answer 1

It sounds like history mode is not configured correctly on the server side.

As a test, change this:

const router = new VueRouter({
    mode: 'history',
    routes, // short for `routes: routes`,

})

...to this:

const router = new VueRouter({
    //mode: 'history',
    routes, // short for `routes: routes`,

})

If it works , it means your server side is not set up properly for Vue History Mode and you'll need to configure your server side to allow for history mode.

• Example 1
• Example 2 - scroll down a little more than half way to "The Server-Side" section