Используйте " / " в качестве дополнительного разделителя для параметров в Url-Angular-Ui-Router

У меня есть сложный вопрос, который я не смог решить в то время.

По существу, когда я нахожусь на определенном $route и делаю определенный $state.go(routeName, params);, мне нужно добавить определенный parameter или несколько parameters к url. Кроме того, обратите внимание на то, что маршрут также может быть посещен без каких-либо параметров вообще, поэтому он должен быть чистым.

Я хотел бы добиться такого результата:

  • Фактический Url: localhost:4000
  • Искомый Url: localhost:/4000/myRoute/myStuff/myParam
  • избегайте : localhost:/4000/myRoute// Если a $state.go(myRoute) без параметров не предусмотрено.

Например: 

$state.go(myRoute, {
   param1 : 'myStuff',
   param2 : 'myParam'
});

function myRoute($stateProvider) {

    $stateProvider
        .state('myRoute', {
            url: 'myRoute/{param1}{param2}',
            parent: 'myParent'
              . . .
        })
}

Будет работать, но давать localhost:/4000/myRoute/myStuffmyParam.

Итак, я попробовал использовать / в качестве разделителя url: 'myRoute/{param1}' + '/' + '{param2}' и это работает просто отлично, я получаю localhost:/4000/myRoute/myStuff/myParam.

Но, конечно, / добавляется, даже если параметров нет. Например, выполнение $state.go('myRoute') приведет к localhost:/4000/myRoute//, что явно неправильно.

Теперь, сказал я себе, может быть, если я просто добавлю это к param1, я достигну того, что мне нужно.

Итак, я попробовал с

  • param1 : 'myStuff' + '/'
  • param1 : 'myStuff' + '/'
  • param1 : 'myStuff/'
  • param1 : 'myStuff/'

Но все они ведут к одному и тому же url localhost:4000/myRoute/myStuff~2FmyParam. В то время как, если я использую другой разделитель, такой как -, он работает просто отлично.

param1 : 'myStuff-' ведет к localhost:4000/myRoute/myStuff-myParam

EDIT

Использование {param} и :param - это одно и то же. Ссылка угловые-интерфейс/интерфейс-маршрутизатор маршрутизации URL-адрес

Я не нахожу никакого решения, также глядя на ответы, предоставленные в способ создания необязательного параметра в url?[81]}. Попытка myRoute[/:param1[/:param2]] также выдаст ошибку.

EDIT

Также попытка param1%2F или 'param1' + '%2F' не сработает. Я соответственно получаю ~2F & %252f как разделитель. Также выполнение decodeURI('%2F') приводит к такому же жалкому результату.

  • Как правильно использовать такой разделитель, избегая его добавления, когда нет параметров, а также правильно визуализировать?

Для любого разъяснения просто оставьте комментарий. Заранее спасибо.

3 4
javascript angularjs angular-ui-router angular-routing

3 ответа:

Вам не нужно создавать все эти механизмы, чтобы достичь того, чего вы хотите. Как сказал @trichetriche, вы можете создать определенный набор дочерних маршрутов.

Вам нужно отредактировать ваш $routeProvider как: 

//for the clean url - localhost:/4000/myRoute/
$stateProvider
    .state('myRoute', {
        url: 'myRoute/',
        parent: 'myParent'
          . . .
})
//for myStuff/param1 url - localhost:/4000/myStuff/param1
$stateProvider
    .state('myRoute.myStuff', {
        url: 'myStuff/{param1}', //also adding other params
        parent: 'myRoute'
          . . .
})
Вы можете добавить столько детей, сколько захотите, если они вам нужны.

С соответствующим $ состоянием.го:

  • $state.go('myRoute');
  • $state.go('myRoute.myStuff', { param1 : 'HeyOhLetsGo' });
1
$stateProvider.state('state', {
    url: "/state/:id/:name/:something",
    templateUrl: "bla.html",
    controller: 'BlaCtrl'
  });

$state.go('state', {id: 1, name: 'pepe', something: 'nothing'});

Это работает для меня, производит: / Состояние/1 / Пепе/ничего

3

Не можете ли вы создать маршрут матери и маршрут ребенка ? Разве это невозможно ?

1