Question

我使用https://github.com/angular-ui/ui-router库。当我尝试访问索引路由（'/'）时，我被重定向到404.代码：

angular.module('cr').config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('home', {
            url: '/',
            templateUrl: 'views/index.html'
        });

    $urlRouterProvider.otherwise('/404');
});

该代码有什么问题？虽然当我使用ui-sref =“home”时它可以工作但是网址看起来像'/＃/'但是当用户输入网站名称时他只使用域名，比如'mysite.com'，而不是'mysite.com/# /'

Answer 1

您已声明在提供任何 unknown / other 路由时的行为方式 - 转到/404。

但是，我们还必须定义如何操作，当某些预期但不是“精确”/“未知”路线被访问时，即。创建别名

这就是.when()可以/应该使用的地方：

...

// the known route, with missing '/' - let's create alias
$urlRouterProvider.when('', '/');

// the unknown
$urlRouterProvider.otherwise('/404');

Answer 2

您的代码没有任何问题。您只是缺少404的明确状态。请尝试添加：

.state('404', {
    url: '{path:.*}',
    templateUrl: 'views/404'
});

要摆脱哈希（＃）符号，您需要在配置模块中再注入一个依赖项：

$locationProvider

并使用.html5Mode（）方法将HTML5模式设置为true，如此

$locationProvider.html5Mode(true);

另外，请确保您的服务器配置为允许Angular处理您的路由。例如，这是一个允许上述技术工作的Node / Express配置：

app.get('*', routes.index);

在index.js文件中（或者你配置你的node.js实例）：

exports.index = function(req, res){
   res.render('index');
};

Answer 3

这里举例：

// the known route, with missing '/' - let's create alias
$urlRouterProvider.when('', '/');

// Redirect any unmatched url to 404 view (without change location.hash)
$urlRouterProvider.otherwise(function($injector) {
    var $state = $injector.get('$state');
    $state.go('404', null, {
        location: false
    });

}); 

$stateProvider
    // homepage views
    .state('homepage', {
        url: "/",
        templateUrl: "views/homepage.html",            
        data: {
            pageTitle: 'Home'
        }
        ... more here ...
    })
    // 404 views
    .state('404', {
        url: "/404",
        templateUrl: "views/404.html",            
        data: {
            pageTitle: '404 Not found'
        }
    });

Answer 4

ui-router对我来说最简单的方法是给url字段一个空值：

        $stateProvider
        .state('home', {
            url: '',
            templateUrl: 'views/homepage.html',
            controller: 'AppCtrl'
        })

在ui路由器的家庭路线

4 个答案: