Why does my Vue-router component fails to reload except if loaded from router-link

Question

I am using vue-router for route navigation in my laravel/Vue.js app. I have a Post component holding individual post of a blog, with router-link tags on excepts of post like so:

<router-link v-bind:to="'/post/' + post.id">
    <p class="post_body">{{ post.body | truncate(100) }} </p> 
</router-link>

post.id comes from props cascaded down from the parent component, Posts. The router-link should redirect to another component i called single which will show the single post in details when clicked.

<template>
    <div class="single">
        <h1>{{ id }}</h1>
    </div>
</template>

<script>
  export default{
    data(){
      return {
        id: this.$route.params.id
      }
    },
    created(){
       console.log(this.id);
    }
  }
</script>

The single post loads fine. However, when i try to reload/refresh the page, it goes blank. Why does the single component only load when i click from the post component but when i try to reload the page/component, it goes blank (the console also goes blank on refresh).

Please have a look at this router.vuejs.org/en/essentials/… — Ru Chern Chong

DigitalDrifter DigitalDrifter · Accepted Answer · 2018-04-18T11:34:32

To expand on @LinusBorg's answer, with Laravel you would define a catch all route to your app.blade.php view file:

Route::get('/{path?}', 'AppController@index')->where('path', '.*');

The controller's action would simply return the view:

// AppController.php
public function index()
{
    return view('app');
}

Why does my Vue-router component fails to reload except if loaded from router-link

2 Answers