首页 文章

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

提问于
浏览 次
0

我在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向下级联的道具 . 路由器链接应该重定向到我称为单一的另一个组件，它将在单击时显示单个帖子的详细信息 .

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

laravel vue.js vue-router

2 回答

  • 0

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

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

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

    // AppController.php
public function index()
{
    return view('app');
}
    回复于
  • 0

    我会假设您正在使用历史记录模式但没有正确设置服务器 .

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

    链接到文档here

    回复于

相关问题