CODEWITHSUNDEEP
laravellaravel-5vue.jsvuejs2
Otto
Otto

Reputation: 693

URL route from Laravel to Vue Router (page not found..)

I'm using Laravel 5.4 and vue-js 2.4

Laravel routes

Route::get('/{component?}', 'HomeController@index');

HomeController

public function index()
    {
        return view('welcome');
    }

Vue router

const routes = [
    { path: '/', name: 'myspaces', component: myspaces},
    { path: '/inspiration', component: inspiration },
];

When I click on this, about component is well displayed and the url is example.com/myspaces

<router-link to="/myspaces">myspaces</router-link>

welcome.blade.php

<div id="app">
        <v-app>

            <v-content>

                @Guest
                    <navigationloggedout></navigationloggedout>
                    <p>Not logged in</p>
                    <router-view></router-view>
                @else
                    <navigationloggedin></navigationloggedin>
                    <p>Logged in</p>
                    <router-view></router-view>
                @endGuest

            </v-content>

        </v-app>

</div>

Issue When I enter example.com/myspaces directly. It doesn't actually load the page I want it to, it just loads the welcome.blade.php with the <router-view></router-view>. While I want it to load the specific component myspaces.

How can I find a way to directly reach my vue urls, like they are normal links? Vue normally works with example.com/#/myspaces. You can remove this with mode: history, however you can never actually go to links directly without a 404 error.

Upvotes: 2

Views: 1373

Answers (1)

Marcus Christiansen
Marcus Christiansen

Reputation: 3207

Please try the following:

Route::get('/{component?}', function () {
    return view('welcome');
})->where('component', '[\/\w\.-]*');

I've just replaced the HomeController@index with an anonymous function for simplicity sake.

Upvotes: 1

Related Questions