Question

我在laravel / Vue.js应用程序中使用vue-router进行路由导航。我有一个Post组件持有一个博客的个人帖子，在帖子的例外上有路由器链接标签，如：

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

post.id来自于从父组件Posts向下级联的道具。路由器链接应该重定向到另一个名为single的组件，单击该组件时会显示单个帖子。

<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组件单击时加载，但是当我尝试重新加载页面/组件时，它变为空白（控制台在刷新时也变为空白）。

Answer 1

要扩展@LinusBorg的答案，使用Laravel，您将定义一个捕获到app.blade.php视图文件的所有路径：

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

控制器的操作只会返回视图：

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

Answer 2

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

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

链接到文档here

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

2 个答案: