Laravel Vue VueRouter history mode

Question

I'm building an e-commerce project with laravel, vue and vue router

I want to use vue router with history mode but it cause me trouble.

Here is my code

new Vue({
    el: '#app',
    router: new VueRouter({
        mode: 'history',
        routes
    })
});

Here is my route in web.php which have locale middleware

Route::group(['prefix' => '{locale}', 'where' => ['locale' => '[a-zA-Z]{2}'], 'middleware' => 'setlocale'], function () {
    Route::view('/{path?}', ('layouts.app'))->where('path', '.*');
});

Here is my route with vue router

export const routes = [
    {
        path: '/',
        component: require('./components/Page/HomePage').default,
    },
    {
        path: '/product',
        component: require('./components/Page/Product/ProductPage').default,
    },
];

I need my url to be

http://localhost/en

instead of (with the hashtag)

http://localhost/en#/

After using history mode, i successfully remove the hashtag. But, the router link of other will remove my locale in my url

http://localhost/product

I don't know what to do now with it. Please help~ Thanks.

Update 19 Mar 2020

D Malan · Accepted Answer · 2020-03-16 19:22:41Z

9

+50

You need to set the base value to tell Vue Router what the base URL of your application is. In your case you can set it dynamically using the locale value.

For example, in your Blade template you could have the following script to set the locale value on the JavaScript window object:

<script>
    window._locale = "{{ app()->getLocale() }}";
</script>

And then you can set the base value to the locale when creating your router:

router: new VueRouter({
  mode: 'history',
  base: `/${window._locale}/`,
  routes
})

answered Mar 16, 2020 at 19:22

D Malan

11.6k3 gold badges35 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

BlackLotus Over a year ago

I tried but still the blank page showing with the history mode enabled..

D Malan Over a year ago

What do you mean? You didn’t mention a blank page in your question.

D Malan Over a year ago

@BlackLotus I created a demo for you on Github.

BlackLotus Over a year ago

i tried your demo ''localhost/clone/public/en/home'' But your demo also showing blank isn't it?

MSC Over a year ago

Super thanks. It's pretty important but sadly not mentioned in the Vue Router Guide, only in the API Reference: router.vuejs.org/api/#base

|

TEFO · Accepted Answer · 2020-03-19 11:44:45Z

3

Very simple way is too Accept the locale in Vue router too. So your route would be like this:

export const routes = [
    {
        path: '/:locale',
        children: [
        {
            path: '',
            component: require('./components/Page/HomePage').default,
        },
        {
            path: 'product',
            component: require('./components/Page/Product/ProductPage').default,
        },
        ]
    }
];

just be sure for children route dont put '/' in begining because its remove locale

answered Mar 19, 2020 at 11:44

TEFO

1,67812 silver badges28 bronze badges

Collectives™ on Stack Overflow

Laravel Vue VueRouter history mode

2 Answers 2

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related