Angular ui路由器:添加templateUrl破坏路由

Angular ui-router: adding templateUrl breaking routing

本文关键字:路由 templateUrl 添加 ui 路由器 Angular      更新时间:2023-09-26

我遇到一个问题,一旦templateUrl添加到ui-router子状态,应用程序将不再执行到该状态的路由。当它只是一个模板时,它工作得很好。

app.js

app.config(['$stateProvider', '$locationProvider', '$urlMatcherFactoryProvider', '$urlRouterProvider',
    function ($stateProvider, $locationProvider, $urlMatcherFactoryProvider, $urlRouterProvider) {
        $urlMatcherFactoryProvider.caseInsensitive(true);
        $urlMatcherFactoryProvider.strictMode(false);
        $urlRouterProvider.otherwise('/page-not-found');
        $stateProvider
                .state('dashboard', {
                    url: '/',
                    views: {
                        'header': {
                            template: 'header'
                        },
                        'nav': {
                            template: 'nav'
                        },
                        main: {
                            template: 'You are on the homepage'
                        }
                    }
                });
        $locationProvider.html5Mode(true);
    }]);
app.run(['$rootScope', 'userService', '$state', function ($rootScope, user, $state) {
    $rootScope.$on("$stateChangeError", console.log.bind(console));
    if (!user.exists) {
        $state.go('user.reg');
    }
}]);

User.states.js

.config(['$stateProvider', function ($stateProvider) {
    $stateProvider
            .state('user', {
                url: '/users',
                abstract: true,
                views: {
                    'header': {},
                    'nav': {},
                    'main': {
                        template: '<ui-view/>'
                    }
                }
            })
            .state('user.reg', {
                url: '/register',
                //template: 'This will show fine',
                templateUrl: '/app/Users/User.login.html' // this will break
            });
}]);

更新

若在初始页面中添加ui-sref="user.reg",则可以使用templateUrltemplate导航到状态/页面精细。所以当我尝试使用state.go('user.reg'); 时,这只是一个问题

这意味着解决方案正在使用$location提供程序来更改路径。具有相同的效果,但看起来确实相当错误

问题出在相对路径上。

看看这个代码:

$locationProvider.html5Mode(true);

您启用了html5模式,为了实现这一点,您在html中设置了基本ref,它可能看起来像这样:

<base href="/">

您的问题可能是模板的路径不是"yoursite.com/app/Users/User.login.html"

有关代码的工作版本,请参阅此Plunker。然后进入html代码并取消对基本标记的注释,注意到它将中断。