为什么我的 Vue-router 组件无法重新加载，除非从 router-link 加载

Question

我在 laravel/Vue.js 应用程序中使用 vue-router 进行路线导航。我有一个 Post 组件，其中包含博客的个人 post，在 post 的例外上带有 router-link 标签，如下所示：

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

post.id 来自从父组件 Post 级联下来的道具。 router-link 应该重定向到另一个我称为 single 的组件，它会在单击时详细显示单个 post。

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

单个 post 加载正常。但是，当我尝试 reload/refresh 页面时，它变成空白。为什么单个组件仅在我从 post 组件单击时加载，但当我尝试重新加载 page/component 时，它变为空白（控制台在刷新时也变为空白）。

Answer 1

我假设您使用的是历史记录模式，但没有正确设置服务器。

使用历史记录模式时，您的网络服务器必须将对前端路由的调用（例如刷新 /page/1 时）重定向到 index.html，以便您的 Vue 应用程序可以启动并接管路由处理。

Link 到文档 here

Answer 2

为了扩展@LinusBorg 的回答，使用 Laravel 你可以定义一个捕获所有路由到你的 app.blade.php 视图文件：

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

控制器的动作只是 return 视图：

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

为什么我的 Vue-router 组件无法重新加载，除非从 router-link 加载

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

laravel

vue.js

vue-router