Vue，与两条路由共享blade/view

Question

我被困在这里，我不确定最好的行动方案

目前我有一个 blade 和 vue 组件组成一个仪表板。我有一条路线加载仪表板的视图，另一条路线（根据事件在仪表板内调用）获取 ID 的详细信息。

这现在工作得很好。

问题是我希望能够从外部访问第二条路线（如站点。com/status/12345）并默认加载该 ID (12345) 的数据。

现在我访问了网站。com/status 并在创建页面时调用 fetchEntries 来获取数据，我根据该数据使用 links 渲染 table ，因此，如果您单击 link，它会将该单击条目的 ID 传递到 status/{id} 以获取该特定单击条目的详细信息。然后它将返回的数据加载到详细信息屏幕中。

我在这里要做的就是让它在我调用 status/12345 时命中该路由，以及我的控制器 details 方法。我知道我也可以在创建页面时调用该函数，但我想知道如何处理 site.com/status 和 site.com/status/12345.

之间的区别

我应该在这里做什么，我该怎么做？

这是我现在拥有的：

controller.php

public function index() {

    return view('Entry.status');
}

public function details($id) {

    return json_encode(Entry::getDetails($id));
}

web.php（路线）

Route::get('/Entry/status', 'Entry\EntryController@index')
    ->name('Entry.status');

Route::get('/Entry/status/{id}', 'Entry\EntryController@details')
    ->name('Entry.status');

status.vue

created() {

    this.fetchEntries();
 },

fetchEntries() {

  axios.get('/Entry/dashboard')
  .then(response => {

    this.events = response.data;

  })
  .catch(function(error) {

    console.log(error)
  })
  .finally(function() {

  })
},

getDetails(event) {

    this.detailId = event.taskt_id;

    axios.get('/Entry/status/' + this.detailId)
        .then(response => {
    ...
}

Answer 1

如果我正确理解你的问题。我想你可以做这样的事情。

public function details($id) {
    if (request()->wantsJson()) {
        return json_encode(Entry::getDetails($id));
    }

    return view('Entry.detail');
}

是你想要的吗？

Vue，与两条路由共享blade/view

Vue, sharing blade/view with two routes

php

vue.js

laravel-5.8