Question

我目前正在使用Material Design Lite和Angular JS开展项目。我在使用角度UI路由器设置简单路由时遇到问题。

以下是索引导航栏中的链接。

 <div class="mdl-layout__tab-bar mdl-js-ripple-effect">
      <a href="/home" class="mdl-layout__tab is-active">Dashboard</a>
      <a href="/schedule" class="mdl-layout__tab">Schedule</a>
      <a href="/assignments" class="mdl-layout__tab">Assignments</a>
    </div>

请注意，我无法在href中的/之前添加＃，因为MDL不会将其识别为有效的选择器。我尝试过制作普通链接但仍然没有路由。

这是ui-route的app配置。

app.config(function($stateProvider, $urlRouterProvider){

        $urlRouterProvider.otherwise('home');



        $stateProvider
        .state('home', {
            url: '/home',
            templateUrl : 'views/dashboard.html'

        })
        .state('assignments', {
            url: '/assignments',
            templateUrl : 'views/assignments.html'
        });

    });

这是我项目的结构。

[app]
[js]
[views
--dashboard.html
--assignments.html]
app.js

归属状态（dashboard.html）在索引文件中的ng-view内部加载，但单击链接时无法显示分配。这是我的http-server控制台中显示的内容。

[Tue Mar 14 2017 12:04:30 GMT-0500 (CDT)] "GET /assignments" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.101 Safari/537.36"
[Tue Mar 14 2017 12:04:30 GMT-0500 (CDT)] "GET /assignments" Error (404): "Not found"

感谢您的帮助！

Answer 1

如果您使用nodejs服务器来提供页面，您是否在应用程序中使用html5Mode（true）？否则，您需要将哈希添加到锚标记。

即

<a href="#/assignments">Assignments</a>

此外，由于您使用的是ui-router，您可以使用ui-sref属性直接导航到州名。

即

<a ui-sref="assignments">Assignments</a>

Angular UI路由器 - 找不到部分GET 404

1 个答案: