ui-router не маршрутизирует к $ urlRouterProvider.otherwise, когда включен html5Mode - PullRequest
Новая
       6

ui-router не маршрутизирует к $ urlRouterProvider.otherwise, когда включен html5Mode

0 голосов
/ 28 апреля 2018

Я постараюсь изложить это очень просто.

Вот файл маршрута для справки: 

angular
        .module("app")
        .config(function($stateProvider,$locationProvider,$urlRouterProvider){

            $urlRouterProvider.otherwise("dashboard");

            $stateProvider
                    .state("home",{
                        url: "/",
                        templateUrl: "views/home/home.html"
                    })

                    .state("login",{
                        url: "/login",
                        templateUrl: "views/login/login.html"
                    })

                    .state("home.dashboard",{
                        url: "dashboard",
                        templateUrl: "views/home/dashboard.html"
                    });       
             $locationProvider.html5Mode(true);
});


Теперь, когда я комментирую $locationProvider.html5Mode(true);, маршрут обычно идет к dashboard. Это URL http://localhost/#/dashboard.

Но когда я пытаюсь использовать html5Mode(with <base href="/"> tag set in index.html, он не направляется на dashboard. Вместо этого он направляется на home.html. Это то, что я получаю http://localhost/. (home.html загружается, а не dashboard.html)


Я действительно хочу знать, почему он успешно перенаправляется на dashboard, когда html5Mode комментируется, и почему нет, когда не комментируется
Пожалуйста, помогите сообществу.

1 Ответ

0 голосов
/ 28 апреля 2018

Когда html5Mode включен , это означает перезапись URL для относительных ссылок.

Это должно решить проблему, ( префикс URL панели инструментов с /) 

.state("home.dashboard",{
  url: "/dashboard",
  templateUrl: "views/home/dashboard.html"
});

Это еще один подход (передача объекта и установка requireBase в false): 

.state("home.dashboard",{
  url: "dashboard",
  templateUrl: "views/home/dashboard.html"
});

$locationProvider.html5Mode({ enable: true, requireBase: false })
...