vuejs react_使用Laravel路由器链接到SPA路由（VueJs，React，Angular）

vuejs react

When we have a Single Page Application, the routing is handled with the javascript framework router — meaning Laravel is not aware of the routes in the SPA. That’s not an issue by itself, but means when we want to link to our app deep links from our backend, we have to hardcode the links.

当我们拥有单页应用程序时，路由将使用javascript框架路由器处理-这意味着Laravel不知道SPA中的路由。 这本身不是问题，而是意味着当我们要从后端链接到应用程序的深层链接时，我们必须对链接进行硬编码。

An example — we want to send an email with a link to the user profile. We do have the route registered in our VueJS router, but not in Laravel.

一个例子—我们要发送一封电子邮件，其中包含指向用户个人资料的链接。 我们确实在VueJS路由器中注册了路由，但在Laravel中却没有。

So we’d probably end up with some hardcoded url:

因此，我们可能最终得到一些硬编码的URL：

// our web.php// First, a link to our spa.blade.php file containing the SPA
Route::view('/app/{any_path?}', 'spa')->where('any_path', '(.*)');// Where we need the link, in our controller, mail etc..
url("/app/profile/{$user->username}")

The link generated with url() will work just fine, but I prefer using named routes instead — they’re easier to use, and if the link changes — all links are updated automatically… making it harder for us to break things unintentionally.

用url()生成的链接可以正常工作，但是我更喜欢使用命名路由-它们更易于使用，并且如果链接发生更改-所有链接都将自动更新……这使我们更难于无意间破坏事物。

那么 ，让我们让Laravel知道我们的SPA路由器链接。 (So, let’s make Laravel aware of our SPA router links.)

Our approach — we will add dummy routes in our web.php file, just so the router is aware they exist, but Laravel will never reach & serve them.

我们的方法-我们将在我们的web.php文件中添加虚拟路由，以使路由器知道它们的存在，但是Laravel永远不会到达并为它们提供服务。

Update: There’s a git repo with the code here.

更新：这里有一个git repo及其代码 。

As you know, routes in Laravel have priority order vertically top-to-bottom. When a route on top, matches the url pattern, Laravel stops searching for other matches down the routes file and serves the first route matched. Perfect for our use case.

如您所知，Laravel中的路由具有从上到下的优先顺序。 当最上面的路由与url模式匹配时，Laravel会停止搜索路由文件中的其他匹配项，并提供第一个匹配的路由。 非常适合我们的用例。

First, lets look at our SpaController:

首先，让我们看一下我们的SpaController：

Our index method, serves the SPA code — then handled by our JSframework of choice.

我们的索引方法提供SPA代码-然后由我们选择的JSframework处理。

Our nonexisting method, is meant to be a placeholder, should never be reached. If it’s reached, it means our SPA router didn’t handle the request properly.

我们永远不应该使用的不存在的方法，就是作为一个占位符。 如果已到达，则表明我们的SPA路由器未正确处理该请求。

Now, our web.php file:

现在，我们的web.php文件：

What happens here:

这里会发生什么：

The “any_path?” route, will catch all links prefixed with “app”. Meaning, any route we register beneath, will be registered with Laravel but never get reached. Bingo!

“ any_path？” 路由，将捕获所有以“ app”为前缀的链接。 意思是，我们在下面注册的所有路线都将在Laravel注册，但永远不会到达。 答对了！

That’s the place where you want to add your SPA links and use them in Laravel.

那是您要添加SPA链接并在Laravel中使用它们的地方。

In the example above, there are 2 links added. Here’s the before/after in the same scenario:

在上面的示例中，添加了2个链接。 这是相同情况下的之前/之后：

As you can see, we can now use named parameters and handle the links dynamically. Just add the links you need to be linked in the backend as routes, no need to add all your SPA links.

如您所见，我们现在可以使用命名参数并动态处理链接。 只需添加您需要在后端链接的链接作为路由，而无需添加所有SPA链接。

Another example for the `/about` page.

/ about页面的另一个示例。

Hope this will make your dev life a bit easier, as it did mine :).

希望这会使您的开发人员生活变得更轻松，就像我的:)。

翻译自: https://medium.com/@dblazeski/handle-spa-vuejs-react-angular-routes-with-laravel-router-dbd20be167c6

vuejs react