同時使用 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'
        })
    }]);

刷新前

重新加載后

我被這個問題困住了請幫助我。 提前致謝

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>