CODEWITHSUNDEEP
laravelvue.jsvuejs2vue-router
Philipp Mochine
Philipp Mochine

Reputation: 4705

Single Page Application on a dynamic path with Vue Router but using same component?

I'm not sure how to tackle my problem. I've the requirement to do a single page application (SPA) with Vue & Laravel within a specific dynamic path.

For example:

www.buying.dev/usernameXY/new-fresh-phone

Shows you the current Sellitem with the Title New Fresh Phone and it's description + Image of usernameXY and sellitem

Below that you can find his most popular items but also items from other users.

Just to visualise it I show you a super fast sketch: Website

So for backend I use Laravel.

Route::prefix('/{username}')->group(function () {
   Route::get('/', 'UserProfileController@show');
   Route::get('/reviews', 'UserProfileController@reviews');

   Route::get('/{selllink}', 'BuyController@show'); //Here comes the SPA
});

If the user scrolls down below he will find other items as well, when he clicks on it the URL changes to

 www.buying.dev/usernameYY/new-awesome-gadget

The change of the url should not refresh the complete page, but just update what is on the top.

For a solution comes Vue Router in my mind, but I never used it with Laravel Route and Vue Route at the same time.

Besides, normally you just call with VueRouter components to see the page such as

routes: [
    {
        path: '/',
        name: 'home',
        component: Home
    }]

But I would only use one component buy.vue. I don't know how I would combine it, with perhaps 

Route::prefix('/{username}')->group(function () {
    Route::get('/', 'UserProfileController@show');
    Route::get('/reviews', 'UserProfileController@reviews');

    Route::any('/{selllink}', 'BuyController@show')
    ->where(['selllink' => '.*']);
 });

But then I don't know how to use Vue Router, because what do I call?

    routes: [
    {
        path: '/*/*', // /Username/Itemname ??
        name: 'buy',
        component: buy.vue
    }]

So I'm lost and I don't what to do.

My alternative is that I don't use Vue Router and therefor are not able to change the URL dynamically.

I could use v-cloak to hide the whole page, only showing when it's mounted/created.

So my question to you is, how would you develop a single page application on a specific dynamic path and also having only one component to use? Or is it possible to change the URL without Vue Router?

I hope it was understandable

Thank you!

Upvotes: 0

Views: 1063

Answers (1)

user1497119
user1497119

Reputation: 473

you can use dynamic path parameters in vue Router.

path: '/page/:lang/*'
component: MyComponent

and something like 

Vue.config.lang = to.params.lang

during beforeEnter to handle the params.

Upvotes: 1

Related Questions