一次使用Laravel和Angularjs路由

Question

我正在开发一个电子商务WebApp。在其中，我将Laravel用于后端，将Angularjs用于前端。但是问题是，当我单击特定的导航项时，它可以正常工作，但是当我重新加载页面时，它将用于laravel路由，并且所有我的css，js，图像等都将无法正确加载。

Laravel代码：

Route::get('/', function () {
    return view('index');
});

Route::get('/dashboard', function () {
    return view('dashboard');
});

Route::get('/products', function () {
    return view('products');
});

Angularjs路由：

var ecommerceApp=angular.module('ecommerceApp',['ngAnimate', 'ngSanitize', 'ui.bootstrap','ngRoute']);

ecommerceApp.config(['$routeProvider','$locationProvider',function($routeProvider,$locationProvider) {

        $locationProvider.html5Mode({
          enabled: true,
          requireBase: false
        });

        $routeProvider
        .when("/a", {
            templateUrl : "dashboard",
            controller: 'ecommerce'
        })

        .when("/products", {
            templateUrl : "products",
            controller: 'ecommerce'
        })
    }]);

Before Refresh

After Reload

我陷入了这个问题，请帮助我。 预先感谢

Answer 1

您可以创建一条将所有请求发送到单个控制器动作或查看文件的路由，这样路由是在客户端而不是服务器端完成的。

将以下内容添加为路由文件中的最后一条路由。如果您需要任何服务器端路由，则必须先于它们。

// [Needs to be last] Catch all non-routed GET request to SpaController
Route::get('/{any}', function () {
    return view('index');
})->where('any', '.*');

这是使用正则表达式将所有内容基本发送到单个动作。参见：https://laravel.com/docs/5.4/routing#parameters-regular-expression-constraints

Answer 2

方法：配置服务器以使用html5Mode ¹

启用了html5Mode后，#字符将不再在您的网址中使用。 #符号很有用，因为它不需要服务器端配置。如果没有#，该URL看起来会更好，但它也需要服务器端重写。这是一个示例：

Apache重写

<VirtualHost *:80>
    ServerName my-app

    DocumentRoot /path/to/app

    <Directory /path/to/app>
        RewriteEngine on

        # Don't rewrite files or directories
        RewriteCond %{REQUEST_FILENAME} -f [OR]
        RewriteCond %{REQUEST_FILENAME} -d
        RewriteRule ^ - [L]

        # Rewrite everything else to index.html to allow html5 state links
        RewriteRule ^ index.html [L]
    </Directory>
</VirtualHost>

Answer 3

我找到了解决方案，现在，当我使用$ stateProvider而不是$ locationProvider时，它可以正常工作。

// Angularjs代码

ecommerceApp.config(['$stateProvider','$urlRouterProvider',function($stateProvider, $urlRouterProvider) {
	
  $stateProvider
	.state('products', {
      url: '/products',
      templateUrl: '/products',
      controller: 'ecommerce'
    })
	.state('product/add', {
      url: '/product/add',
      templateUrl: '/product/add',
      controller: 'ecommerce'
    });
 }]);

<li class=""><a ui-sref="products"><i class="fas fa-tags"></i>Product</a></li>



<div data-ui-view=""></div>