無法在AngularJS 1.x中使用帶有查詢參數的UI-Router

Question

我正在使用帶有AngularJS 1.5.9的UI-Router，我嘗試使用查詢參數處理路由'/ reregister'。

我嘗試在外面（通過鏈接）調用此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

注意&和? 。 在URL中，第一個參數應始終與? 和隨后的與PARAMS &如/contacts?myParam1=value1&myParam2=wowcool

其次，您正在使用rereigster ，如果您想要優雅地捕獲值，則可能需要使用以下狀態定義單獨處理：

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

要么

您可能想要將URL更改為

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

因為你已經擁有了?id的路線。

更新：處理＃的其他信息！ 格式哈希前綴。

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