Question

我正在为我的网页使用express，angular和ui-router。我希望每个用户页面的网址都非常简单：www.mysite.com/username

这类似于Twitter的设计。我的用户页面角度状态提供程序如下所示：

$stateProvider
   .state('userPage', {
        url: '/:username',
        templateUrl: 'js/user-page/user-page.html',
        controller: 'UserPageCtrl'
});

现在唯一的问题是，当我尝试导航到其状态仅使用一个URL部分定义的任何其他页面时（例如www.mysite.com/login），应用程序始终以用户身份解析URL页面（但无法找到用户）。

在将url视为动态参数之前，有没有办法告诉angular尝试将URL加载为已定义的状态？

我可以简单地要求所有其他路线都有两个参数（例如www.mysite.com/login/userlogin），但这看起来并不优雅。

Answer 1

您只需要先定义login州。订单很重要。

$stateProvider
   .state('login', {
        url: '/login',
        templateUrl: 'somewhere/login.html',
        controller: 'LoginPageCtrl'
    },
   .state('userPage', {
        url: '/:username',
        templateUrl: 'js/user-page/user-page.html',
        controller: 'UserPageCtrl'
    },

});

如果用户导航到/login，则会搜索匹配状态。它将检查您的第一个状态，然后检查第二个状态，依此类推，直到找到匹配状态。在这种情况下，login状态将匹配，因此搜索另一个匹配状态将停止。

使用ui-router避免动态路由

1 个答案: