Laravel Routes with Vue Router (SPA) Not Working as normal

Related searches

I am trying to create a Laravel Vue SPA application. And it seems that I cannot get the route all to function properly. Everytime I use the get('{any}') all my axios get methods call returns the index.blade.php. But if I define all routes in routes.js with more or less the same signature in my web.php (Laravel) my axios routes in getting the data works fine.

web.php

// This work but every time I do an Axios call it returns my index.blade.php
Route::get('{any}', 'SiteController')->where('any', '.*');

// This works if I define all routes, with axios fetching data normally and 
// displaying the data in Vue normally
Route::get('/', 'SiteController');
Route::get('/blog', 'SiteController');
Route::get('/post/{postId?}', 'SiteController');

routes.js

const routes = [
    { path: '*', component: Home },
    {
        path: '/',
        component: Home,
        children: [
            {
                name: 'blog',
                path: '/blog',
                component: PageBlogLists,
            },
            {
                name: 'post',
                path: '/post/:page_id',
                component: PageBlog,
            },
        ],
    },
];

 export default new VueRouter({
        base: '/',
        fallback: true,
        mode: 'history',
        routes: routes,
    });

So first the root view, I do not know how does yours look like but it should be something like this

Route::get('{path}', function () {
    return view('index');
})->where('path', '(.*)');

Second, you are building SPA, you should not be using web.php, you should use api.php

if you have to and really want to use web.php, you can move the any down to the bottom, and prefix all the other routes with something else.

How do i use Vue Router and normal laravel Route together, i am trying to use Vue Router with a existed lavavel project , it seems they cannot stand together. Route all of your deep links through the root of the SPA. @ KNietzsche thanks , but that's not what i want . and replace with a laravel url that should work too ! ok, lolbut, what do you want to know indeed� Laravel 5.8 + Vue + Vue Router + Vuetify 2.0 = SPA. your Vue Router can’t work properly. 5. Create Controller Setup Vue Router. We need to create a route in order for us to navigate.

So I finally got it working I've changed my routes to

 Route::get('/{any}', 'SiteController')->where('any', '^(?!api).*$');

and move all my API requests to the api.php file

Route::resource('/posts', 'WordpressController');

router.js and axios works fine now :)

Laravel catch-all route for Vue Single Page Applications – Yet , Set a Laravel catch-all route for Vue Single Page Applications. Building a complex VueJS SPA implies a lot more challenges than an ordinary application. At my job we are creating a VueJS powered SAAS platform, which shows defined in the routes file of Vue-Router, but not in Server's configuration). Laravel routes not working when using Vue Router Hot Network Questions How to get infosec team to see that their over-the-top security measures are only decreasing security?

I do not have a clear picture of the other codes you have in your hands.

But for laravel vue router, this reference helps me a lot

https://medium.com/@weehong/laravel-5-7-vue-vue-router-spa-5e07fd591981

You could give it a try. Hope this helps.

Bullet-proofed routing with Laravel and Vue (Part 1) - DEV, I know, we might not want to admit it but with Vue and laravel running a show as an spa, we usually have a routing problem. have them use the normal route values when clicked from the the route link router-link component. However, to get them working together we need to esnure that server-side Laravel router is able to work in tandem with the history.pushState API of the Vue Router. The Vue router can be configured to use history mode or the default hash-mode, which uses the URL hash to simulate a full URL so the page won’t reload when the URL changes.

How to combine the VueJS Router with Laravel, change the route. How can we do that, when working with Laravel? Laravel's routing is now stopped and VueJS can take it over from here. As a reminder, this tutorial isn’t focused on permissions; we are using the built-in Laravel users table to demonstrate working with CRUD within the context of a Vue Router project. Here’s the series outline thus far: Setting up the Project and Vue Router – Part 1; Loading Async Data in Vue Router – Part 2

Building a Vue SPA with Laravel, This tutorial will show you how to get up and running with Vue router and a Laravel backend. Building a Vue single page application (SPA) with Laravel is a The Vue Router will then determine the route and render the from a component to Laravel; Probably much more that I'm not going to list here… In this series we'll make a simple Single Page Application with the best tools and technologies out there. Laravel will be used as our Backend API, users aut

Defining the UsersEdit Vue Component. With the show route in place, we can turn our attention to defining the frontend Vue route and the accompanying component. Add the following route definition to the resources/js/app.js routes. Here’s a snippet of importing the UsersEdit component—which we have yet to create—along with the entire route

Comments
  • Moving any route to be the last route in your web.php should fix your problem.
  • Already done with that. My problem is with the axios returning the whole view blade instead of the JSON object