AngularJS ui-router中的URL路由參數

Question

我希望能夠僅重新加載應用程序的嵌套視圖並附加一個route參數，以便可以在應用程序中進行URL路由。 我不知道如何做到這一點，最初是讓它與這樣的查詢一起工作的：

$location.search('userId', user._id);
//http://localhost:9000/#/user/?userId=123456789

我所需的網址如下，其中的userId = 123456789

http://localhost:9000/#/user/123456789

我的app.js文件

$stateProvider
    .state('index', {
        url: '/',
        views: {
            '@' : {
                templateUrl: 'views/layout.html'
            },
            'top@index' : {
                templateUrl: 'views/top.html',
                controller: function($scope, $state) {
                    $scope.userLogOut = function() {
                        $state.go('login');
                    };
                }
            },
            'left@index' : { templateUrl: 'views/left.html' },
            'main@index' : { templateUrl: 'views/main.html' }
        }
    })
    .state('index.user', {
        url: 'user:userId',
        templateUrl: 'views/user/user.html',
        controller: 'UserCtrl'
    })
    .state('index.user.detail', {
        url: '/',
        views: {
            'detail@index' : {
                templateUrl: 'views/user/details.html',
                controller: 'DetailCtrl'
            }
        }
    })

在我的控制器中：

$state.reload('index.user.detail', {userId: $scope.user._id});

Answer 1

使用ui-router ，可以使用$state.go('index.user', { userId: {{yourid}} });

為了允許查詢字符串參數使用ui-router起作用，請像下面這樣編寫您的狀態，

.state('index.user', {
    url: 'user/?userId=:param',
    templateUrl: 'views/user/user.html',
    controller: 'UserCtrl'
})

這將使它起作用，

// http：// localhost：9000 /＃/ user /？userId = 123456789

沒有查詢字符串參數（您想要的網址）就是這個，

.state('index.user', {
    url: 'user/:userId',
    templateUrl: 'views/user/user.html',
    controller: 'UserCtrl'
})

http：// localhost：9000 /＃/ user / 123456789