Question

我正在使用带有AngularJS 1.5.9的UI-Router，我尝试处理路由＆＃39; /重新注册＆＃39;带有查询参数。

我尝试在外面（通过链接）调用此URL表单：

https://myapp.herokuapp.com/#/register-slack&reregister=T2KLC5H3Q

但每次将URL重定向到

https://myapp.herokuapp.com/#!/

我也想知道为什么会有！在网址中的＃符号后添加了标记。

我有以下$ stateProviderConfig用于此目的：

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

        $stateProvider
        // HOME STATES AND NESTED VIEWS ========================================
            .state('home', {
                url: '/',
                templateUrl: 'views/home.html'
            })
            .state('register-slack', {
                url: '/register-slack',
                templateUrl: 'views/register-slack.html',
                controller: 'registerSlackCtrl'
            })
            .state('reregister-slack', {
                url: '/reregister-slack?id',
                params: {
                    id: { value : ""},
                },
                templateUrl: 'views/register-slack.html',
                controller: 'registerSlackCtrl'
        })
            .state('confirm-registration', {
                url: '/confirmation',
                templateUrl: 'views/show-confirmation.html'
            })
            .state('show-skills', {
                url: '/about-skills',
                templateUrl: 'views/show-skills.html'
            });

        $urlRouterProvider.otherwise('/');
        $locationProvider.html5Mode(false);
    });

Answer 1

首先应该从

修复URL

https://myapp.herokuapp.com/#/register-slack&reregister=T2KLC5H3Q

到

https://myapp.herokuapp.com/#/register-slack?reregister=T2KLC5H3Q

注意&和?。在网址中，第一个参数应该始终与?和&的后续参数一起变为/contacts?myParam1=value1&myParam2=wowcool

其次你正在使用rereigster，如果你想要优雅地捕获一个值，你可能想要使用以下状态定义单独处理：

.state('reregister-slack', {
                url: '/reregister-slack?rereigster',
                params: {
                    id: { value : ""},
                },
                templateUrl: 'views/register-slack.html',
                controller: 'registerSlackCtrl'
        })

OR

您可能需要将网址更改为

https://myapp.herokuapp.com/#/register-slack?id=T2KLC5H3Q

因为您已经有?id的路线。

更新：有关处理的更多信息＃！格式哈希前缀。

$locationProvider.html5Mode(false);
$locationProvider.hashPrefix("!");

无法在AngularJS 1.x中使用带有查询参数的UI-Router

1 个答案: