'/' 不让状态传递给 AngularJs UI 路由器中的 '/{username:[a-zA-Z0-9]{3,20}}' [英] '/' is not letting the state to pass to '/{username:[a-zA-Z0-9]{3,20}}' in AngularJs UI-router

问题描述

我有一个名为 'site' 的抽象根状态，其 url 为空，即 '' ，它有两个子状态 'profile' 和 'home'，其中 home 的 url 是 '/'，而 profile 的 url 是 '/{username:[a-zA-Z0-9]{3,20}}' 为了测试我尝试了很多次进入profile状态，但总是到达home状态.

I have a abstract root state called 'site' with empty url i.e. '' , which has two child state 'profile' and 'home' where the url for home is '/' and the url for profile is '/{username:[a-zA-Z0-9]{3,20}}' inorder to test I tried many times to go to the profile state but it always reaches the home state.

但是当我用 '/home' 更改 home state url 时，我就可以转到 profile state.在网上搜索后，我找不到这个问题.这是一个错误吗?还是我做错了什么?

But when i change the home state url with say '/home' then i'm able to go to the profile state. After searching the web i couldn't find this issue. Is it a bug? or i'm doing something wrong?

这是$stateProvider

     $stateProvider.
        state('site', {
            url: '',
            abstract: true,
            views: {
                '': {
                    templateUrl: 'views/site.html' //this is the base template
                },
                'navbar@site': {
                    templateUrl:'views/navbar.html'
                }
            },
            data:{
                access: access.public
            }
        }).
        state('site.home', {
            url: '/',
            templateProvider :['$rootScope','$http','$state',function($rootScope,$http,$state){
                //console.log($state);
                var template = 'views/main_new.html';
                if($rootScope.User.isLoggedIn()){
                    template = 'views/new_room_me.html'
                }
                return $http.get(template).then(function (resp) {
                    return resp.data;
                });
            }]
        }).
        state('site.profile',{
            url:'/{username:[a-z0-9A-Z]{3,20},strict:true}',
            templateUrl:'views/new_room_friend.html'
        });


       $urlRouterProvider.otherwise('/ankit');

推荐答案

有一个有效的示例，这里我主要是切换状态声明的顺序:

There is a working example, where I mostly switched the order of state declaration:

.state('site.profile',{
        url:'/{username:[a-z0-9A-Z]{3,20}}',
        ...
    })
.state('site.home', {
        url: '/',
        ...
    })

原因是 ui-router url 引擎确实按照声明的顺序迭代状态，并尝试找到 url 匹配.这样，我们将得到工作定义.

The reason is that ui-router url engine does iterate states in order they were declared, and tries to find a url match. this way, we will get the working definition.

但我建议:

使用一些关键字来区分url，例如url:'/profile/{username:[a-z0-9A-Z]{3,20}}',

use some keyword to distinguish url, e.g. url:'/profile/{username:[a-z0-9A-Z]{3,20}}',

这不仅有助于引擎通过 url 找到正确的状态，甚至从 url 的用户/读者的角度来看 - 这在我看来更明确、更自我描述.

Not only this will help the engine to find the proper state by url, but even from perspective of the user/reader of the url - this seems to me more explicit, self-descriptive.

无论如何，切换状态 def 应该可以解决这里的问题...

Anyhow, switching state def should solve the issue here...

这篇关于'/' 不让状态传递给 AngularJs UI 路由器中的 '/{username:[a-zA-Z0-9]{3,20}}'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！