Как перезагрузить браузер и сохранить текущее состояние в AngularJS UI-Router?

0

Я создал небольшое веб-приложение, где я использую UI-Router для навигации по его страницам. Все работает отлично от обновления браузера или доступа к конкретной странице, используя ссылку состояния. Я попробовал несколько решений, размещенных здесь по одной теме, но не из них помогли, возможно, из-за отсутствия дополнительной информации.

Когда я нажимаю ссылку ui-sref ниже, я получаю "mysite/content", а страница отображается нормально, но как только я обновляю ее или пытаюсь получить доступ, просто вставив ссылку, она не найдет страницу.

Не могли бы вы помочь мне, чтобы он работал так, как ожидалось. Заранее спасибо.

HTML

<p ui-sref="content">Link To Content</p>

AngularJS

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

app.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $urlRouteProvider, $locationProvider){


    $urlRouteProvider.otherwise('/');


    $stateProvider

        .state('home', {
            url: '/',
            views: {
                '': { templateUrl: '/app/templates/wrapper.html'},
                'nav@home': { templateUrl: '/app/templates/nav.html'},
                'header@home': { templateUrl: '/app/templates/header.html'},
                'footer@home': { templateUrl: '/app/templates/footer.html'}
            }
        })

        .state('content', {
            url: '/content',
            views: {
                '': { templateUrl: '/app/templates/content.html'},
                'nav@content': { templateUrl: '/app/templates/nav.html'},
                'header@content': { templateUrl: '/app/templates/header.html'},
                'footer@content': { templateUrl: '/app/templates/footer.html'}

            }
        });

    $locationProvider.html5Mode(true);


}])
  • 0
    Есть ли у вас какие-либо данные, которые необходимо разрешить до загрузки страницы? Может быть, данные вашего приложения не загружены ...
  • 0
    В настоящее время приложение полностью пусто. Теперь я заметил, что если я установил для $ locationProvider.html5Mode (true) значение false, он будет работать, как и ожидалось, но с дефисом в ссылке. пытаясь решить это
Теги:
angular-ui-router

1 ответ

0

Если для html5Mode установлено значение true, при обновлении страницы ваш браузер отправит запрос "mysite/content". В классических одностраничных приложениях у вашего back-end есть набор маршрутов, которые отвечают на некоторые данные, и обычно он настроен на возврат приложения index.html для всех других маршрутов (например, "mysite/content").

Он работает, когда вы отключите html5Mode, потому что браузер делает запрос к URL-адресу без части после "#", для которой ваш back-end, безусловно, возвращает ожидаемый index.html.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню