ui-router 的 $urlRouterProvider.otherwise 使用 HTML5 模式

问题描述

考虑以下来自 ui-router's wiki 的稍微修改的代码.

Consider the following slightly modified code from ui-router's wiki.

var myApp = angular.module('myApp',['ui.router']);

myApp.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
    // for any unmatched url
    $urlRouterProvider.otherwise("/state1");

    $locationProvider.html5Mode(true);

    // now set up the states
    $stateProvider
        .state('state1', {
            url: '/state1',
            templateUrl: "partials/state1.html"
        })
        .state('state1.list', {
            url: "/list",
            templateUrl: "partials/state1.list.html",
            controller: function($scope) {
                $scope.items = ["A", "List", "of", "Items"];
            }
        })
        .state('state2', {
            url: "/state2",
            templateUrl: "partials/state2.list.html",
            controller: function($scope) {
                $scope.things = ["a", "set", "of", "things"];
            }
        })
});

运行python 3的SimpleHttpServer，尝试访问时出现404错误:http://localhost:8000/state1234324324.

Running python 3's SimpleHttpServer, I get a 404 error when trying to access: http://localhost:8000/state1234324324.

为什么不 $urlRouterProvider.otherwise("/state1"); 将所有未知路由重定向到 /state1，根据这个 问题，是否定义了与 /state1 url 关联的 state?

Why didn't $urlRouterProvider.otherwise("/state1"); re-direct all unknown routes to /state1, which per this question, has a defined state associated with the /state1 url?

推荐答案

这是因为当你用/state123413"这样的 url 访问服务器时，它会直接返回 404 响应(客户端没有路由发生).

This is because when you hit the server with urls like "/state123413", it will directly returns the 404 response (No routing at client side takes place).

您需要做的是拥有一条全面的路线.例如在快递中你可以做

What you need to do is to have a catchall route. e.g in express you can do

app.get('/*', function(req, res){
   res.render('defaulttemplate')   
}

这将强制在客户端进行路由.请查看 ui 路由器 faq 通用服务器设置catchall 路由.

This will force the routing on client side. Please see the ui router faq for common servers to set the catchall route.

这篇关于ui-router 的 $urlRouterProvider.otherwise 使用 HTML5 模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！