Routing within a single page app integration

Question

I'm using Craft as the backend for an app and VueJS along with Element API to deliver the content.

Everything so far is working sweet, except when I try to pull up the detail page for an entry because in Craft, the route doesn't exist.

To be clear, my main listing page and links work but if I try to visit http://localhost/slug/id directly, I get a 404.

I know within the context of something like Laravel, I could do

Route::any('{all}', function () {
    return view('index');
})
->where(['all' => '.*']);

Is there something similar I could do with Craft?

I should add I have user registration and aspects that vue can't handle because Craft doesn't have a full crud api.

Answer 1

To pull this off, first you’ll have to make sure all of your Element API endpoints begin with something consistent, like api/ or data/, etc.

Then create a route in craft/config/routes.php that will match everything besides those Element API endpoints:

<?php

return array(
    '(?!api\/).*' => 'index'
);

'index' is the template path the requests should be routed to, so tweak that if needed.

If you have any other routes defined in there, make sure they go before this one.

I should add I have user registration and aspects that vue can't handle because Craft doesn't have a full crud api.

You can use the same controller actions the Control Panel uses. There are a few examples, including user registration at the bottom of the templating docs.

If you want to keep these handled by custom pages, you’ll need to add routes for them in routes.php, or else they will stop working due to that new catchall route. Craft only attempts its default behavior of matching the URI to a public template as a last resort; if a route matches the URI, that route will take precedence.

Answer 2

In case someone uses Craft 3, this should work:

<? return array( '<url:(?!api\/).*>' => ['template' => 'index'] );

Answer 3

Not sure why Davids solution doesn't work for me, I'm using the following (Craft 3.2.8):

return [
    '<url:(?!api\b)\b\w+>' => ['template' => 'index'],
];