SPA使用路由刷新页面，AngularJS

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/

您可以阅读以下内容：从AngularJS URL(#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 -->