Angularjs路由无法正常工作答案

【问题标题】：Angularjs routing not working correctlyAngularjs路由无法正常工作
【发布时间】：2014-12-05 09:22:00
【问题描述】：

angular.module('Stations', ['ngRoute'])      
  .config(function ($routeProvider) {
     $routeProvider
     .when('/documents/:stationId', {
               templateUrl: '/Scripts/Modules/checklist/views/index.html',
               controller: 'checklistController'
           })
     .when('/documents/details', {
                templateUrl: '/Scripts/Modules/checklist/views/details.html',
                controller: 'checklistDetailsController'
            })
});

现在，如果我输入 url /stations#/documents/4，它会跳转到文档视图并显示该站点中的所有文档。但是如果我转到 url stations#/documents/details?Id=3&type=note，它仍然会转到文档主视图而不是详细信息视图。

你能告诉我我做错了什么吗？

【问题讨论】：

它不知道你在请求什么，所以它只显示详细信息视图。您从未将其配置为处理这样的 URL。

标签： javascript php jquery angularjs mvvm

【解决方案1】：

这里路由器认为details 是:stationId

所以它匹配第一条路由/documents/:stationId，并将值details 影响到stationId参数。

您应该将详细信息页面的路线更改为

.when('/details', {

或者如果你想说 stationId 必须是一个数字，你可以用 angular ui-router 做到这一点： https://github.com/angular-ui/ui-router/wiki/URL-Routing#regex-parameters

【讨论】：

你是对的，它假设 stationId 为 details。但它很奇怪，为什么 angular 无法区分 :parameter 的路线？我将 documents 更改为 document，现在它正在工作...
Angular 路由器不知道 details 不是 :stationId 的有效值。
我在回答中添加了一个指向 ui-router 的链接，它允许在参数上设置模式匹配。

【解决方案2】：

也许你应该把路线改成

.when('/documents/details/:id/:note', {... });

这对于在控制器等中使用 $routeParams 获取参数很有用。

【讨论】：

【解决方案3】：

因为执行了第一个匹配的路由，并且该 URL 中的details 被视为 stationId。首先放置第二条路线，以便首先匹配。像这样。

angular.module('Stations', ['ngRoute']).config(function ($routeProvider) {
 $routeProvider
 .when('/documents/details', {
            templateUrl: '/Scripts/Modules/checklist/views/details.html',
            controller: 'checklistDetailsController'
        })
 .when('/documents/:stationId', {
           templateUrl: '/Scripts/Modules/checklist/views/index.html',
           controller: 'checklistController'
       })

 });

但这意味着，如果您的stationId 有任何机会是“详细信息”这个词，那么它将匹配到第一条路线而不是第二条路线。所以考虑避免这种类型的配置。

【讨论】：

【解决方案4】：

你需要在路由中放入参数：

.when('/documents/details:documentId', {
    templateUrl: '/Scripts/Modules/checklist/views/details.html',
    controller: 'checklistDetailsController'
});

见：https://docs.angularjs.org/api/ngRoute/service/$route

【讨论】：

这不是真的，您不需要定义在问号后插入的参数。