Как установить URL без обновления страницы (Laravel + vueJS)

Question

У меня есть приложение Laravel + VueJS.Я хотел бы изменить URL-адрес, когда пользователь выбирает новый год, например.

Пользователь, входящий в идею URL-адреса / [IDEA_ID] / [YEAR] и изменяющий год на странице, поэтому я хочуустановите URL-адрес, но остальная часть работы выполняется через вызов axios.

Вот как я сейчас работаю:

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) у меня есть вся логика, и я делаю только аксиос-запросы.Проблема заключается в том, что я хочу изменить свой URL в моем представлении Vue, когда пользователь, например, меняет год.

Поэтому мне интересно, хорошо ли я все сделал.Было бы лучше разделить компоненты внутри лезвия Laravel?И как я могу изменить только раздел при изменении URL?

Я не использую VueRouter: маршруты указаны только в web.php.

Заранее большое спасибо.

Answer 1

После долгих раздумий я пока не менял свою архитектуру, и я использую history.pushstate только тогда, когда меняется год или идея

idea.vue

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