How to set url without refreshing the page (Laravel + vueJS)

Question

I have a Laravel + VueJS app. I would like to change the url when the user selects a new year, for example.

The user in on the url idea/[IDEA_ID]/[YEAR] and changes year inside the page, so i want to set the url, but the rest of the work is done through axios call.

Here is how I work for now:

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)] );
    }
}

blade view:

@extends('template')

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

And in my Vue view (ideapage), I have all the logic and only make axios requests. The problem is that I want to change my url inside my Vue view, when the user changes the year for example.

Therefore I am wondering if I did the things well. Would it be a better idea to separate the components inside the laravel blade view? And how can I change only a section when the url changes?

I am not using VueRouter: the routes are in web.php only.

Thanks a lot in advance.

Maxiss Maxiss · Accepted Answer · 2019-05-10T08:58:32

After a lot of thinking, I didn't change my architecture for now, and I only use history.pushstate when the year or idea changes

idea.vue

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

How to set url without refreshing the page (Laravel + vueJS)

1 Answers