Vue，与两条路线共享刀片/视图

Question

我很困在这里，我不确定最好的做法

目前，我有一个构成仪表板的Blade和Vue组件。我有一条路由为仪表板加载视图，另一条路由（在发生事件时在仪表板内部调用）获取ID的详细信息。

这现在可以正常工作。

问题是我希望能够从外部打第二条路线（例如site.com/status/12345），并默认加载该ID（12345）的数据。

现在，我访问site.com/status，并在创建页面时调用fetchEntries来获取数据，我使用链接将基于该数据的表呈现出来，因此，如果单击链接，它将把该单击项的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');
}

是您想要的吗？