Question

我有SPA，当我使用路由并希望刷新页面时，我得到404，因为它是客户端路由。

我该如何处理？

Here is my routing:

app.config(function ($routeProvider, $locationProvider) {
    $routeProvider
        // route for the home page
        .when('/', {
            templateUrl: 'index.html'
        })
        .when('/category/gifts/', {
            templateUrl: 'tpl/categories/category-gifts.html',
            controller: 'giftsCtrl'
        })
        .when('/category/gifts/:id', {
            templateUrl: 'tpl/categories/category-gifts.html',
            controller: 'giftsCtrl'
        })

        .otherwise({ redirectTo: '/' });

    $locationProvider.html5Mode(true);
});

例如：http://www.localhost 在我进入http://www.localhost/category/gifts/并执行CTRL + R或按F5后，我得到404，我应该怎样照顾它？

Answer 1

来自MVC RouteConfig的问题请注意更新您的RegisterRoutes（/app_Start/RouteConfig.cs，如下所示，以解决这个问题：

public class RouteConfig
    {
        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            routes.MapRoute(
            name: "Application",
            url: "{*url}",
            defaults: new { controller = "Home", action = "Index" });




        }
    }

或选项B）如果您没有任何控制器，则可以在Global.asax中处理404错误只需将Application_Error方法添加到它。

 protected void Application_Error(Object sender, EventArgs e)
        {
            Exception ex = Server.GetLastError();
            HttpException httpException = ex as HttpException;

            if (ex != null)
            {
                int errorCode = httpException.GetHttpCode();

                if (errorCode == 404)
                {

                    Response.Redirect("~/");
                }
            }
        }

Answer 2

你能尝试把＃介入吗？代替： http://www.localhost/category/gifts/ 你可以把 http://www.localhost/#/category/gifts/

你可以读到： Removing the fragment identifier from AngularJS urls (# symbol)

Answer 3

在我在配置文件中尝试此解决方案之前，我也遇到了这个问题。

配置文件

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

// Specify the three simple routes ('/', '/About', and '/Contact')
$routeProvider.when('/', {
    templateUrl: '/Home/Home',
    controller: 'homeCtrl',
});
$routeProvider.when('/Login', {
    templateUrl: '/account/Index',
    controller: 'loginCtrl',
});
$routeProvider.when('/About', {
    templateUrl: '/Home/About',
    controller: 'aboutCtrl',
});
$routeProvider.when('/Contact', {
    templateUrl: '/Home/Contact',
    controller: 'contactCtrl'
});
$routeProvider.when('/First', {
    templateUrl: '/account/First',
    controller: 'firstCtrl'
});
$routeProvider.when('/Fullpage', {
    templateUrl: '/Home/Fullpage',
    controller: 'fullpageCtrl'
});
$routeProvider.otherwise({
    redirectTo: '/'
});

// Specify HTML5 mode (using the History APIs) or HashBang syntax.
//$locationProvider.html5Mode({ enabled: true, requireBase: false });
$locationProvider.html5Mode(false);}]);

index.cshtml文件

 <a class="brand" href="#/">Simple Routing</a>
        <div class="nav-collapse collapse">
            <ul class="nav">
                <li class="active"><a href="#/">Home</a></li>
                <li><a href="/#/About">About</a></li>
                <li><a href="/#/Contact">Contact</a></li>
                <li><a href="/#/Login">Login</a></li>
                <li><a href="/#/First">first</a></li>
                <li><a href="/#/Fullpage">fullpage</a></li>
            </ul>
        </div><!--/.nav-collapse -->

SPA刷新页面使用路由，AngularJS

3 个答案: