AngularJS不直接通过URL导航到特定页面

Question

我正在用angularjs 1.7开发

我将“索引”页面作为母版页面，并在该页面中调用route1.html。

当我单击route1.html标题中的菜单项时，效果很好。但是，如果我直接访问此链接http://localhost:56631/route1，则会出现404错误。反向导航也会发生这种情况。有什么我想念的吗

app.js

(function () {

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

    myapp.config(function ($stateProvider, $locationProvider, $urlRouterProvider) {

        // For any unmatched url, send to /route1
        $urlRouterProvider.otherwise("/route1")

        $stateProvider
          .state('route1', {
              url: "/route1",
              templateUrl: "SOC/Views/route1.html",
              controller: "route1ctrl"
          })
          .state('route2', {
              url: "/route2",
              templateUrl: "SOC/Views/route2.html",
              controller: "route2ctrl"
          })
        $locationProvider.html5Mode({
            enabled: true,
            requireBase: false
        });

    });


})();

标题页中的菜单项

<li><a ui-sref="route1">Route 1</a></li>