javascript - 单击动态路由器链接时，Vuejs页面不会加载

Question

我正在使用 VueJs 2 和 Laravel 7。我有以下代码，当您单击下一个或上一个时，它应该换出一个动态创建的页面。它会很好地更改 URL，但页面不会更改，我不确定我哪里出错了。

以下是链接：

 <div class="row">
     <div class="col-4 offset-2">              
         <router-link :to="{name: 'question', params: {question: index -1  }, query: {question: index - 1 }}">
             <div v-if="index > 0" class="btn btn-primary">Previous</div>
         </router-link>
     </div>
     <div class="col-4">
         <router-link :to="{name: 'question', params: {question: index + 1 }, query: {question: index + 1 }}">
             <div v-if="index < questions.length" class="btn btn-primary">Next</div>
         </router-link>
     </div>
 </div>   

路由器标签：

<router-view            
     :key="$route.params.question"
     :index="pageNumber + 1"
     :header="header" 
     :questions="questions" 
     v-on:sectionScore="sectionScoreChange"
     :colour="colours[index % colours.length]"
     >
</router-view>       

web.php 中的路由

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

最后是vue router中的路由：

const routes = [
  {
    path: '/question/:question',
    name: 'question',
    component: Questions,    
  }
];

如果有帮助，当您单击路由器链接以更改 URL 并按刷新时，它确实会交换页面，只是不会自动进行。

标签： javascriptvue.jsvue-routerlaravel-7