如何在不刷新页面(Laravel Vuejs)的情况下设置URL

Question

我有一个laravel vuejs应用。例如，当用户选择新年时，我想更改URL。

用户在URL IFEA/[IDEA_ID]/[Year]和页面内更改年度，因此我想设置URL，但其余的工作是通过Axios Call完成的。

这是我现在工作的方式：

Route::get('idea/{n}/{m}', 'IdeaController@idea')->name('idea');

class IdeaController extends Controller
{
    public function idea($id, $year)
    {
        $sql =  "";
        $array = DB::connection('ideas')->select( DB::connection('ideas')->raw($sql));
        return view('ideas/idea', ['idea' => json_encode($array)] );
    }
}

刀片视图：

@extends('template')
@section('content')
<div>
    <div id="app">
        <ideapage ideas="{{ $idea }}"></ideapage>
    </div>
</div>
@endsection

，在我的vue视图(IdeaPage(中，我拥有所有逻辑，只提出Axios请求。问题在于，当用户更改年度时，我想更改vue视图中的URL。

因此，我想知道我做得很好。将Laravel Blade视图中的组件分开是一个更好的主意吗？当URL更改时，如何仅更改部分？

我不使用vuerouter：路由仅在web.php中。

预先感谢。

Answer 1

经过很多思考，我暂时没有更改架构，而我只使用历史记录。

indue.vue

    watch: {
        idea: function() {
          history.pushState({}, null, '/idea/'+this.idea +'/'+this.year)
        },
        year: function() {
          history.pushState({}, null, '/idea/'+this.idea +'/'+this.year)
        }
    },