En nuestra aplicación Angular tenemos que lidiar con identificaciones que contienen un "punto". Por ejemplo:

book = {
  id: '123.456'
}

Tenemos problemas para usar identificadores como parámetros de URL. Todo funciona bien si la navegación se realiza a través de "Angular", es decir, haciendo clic en el enlace que invoca$state.go('bookDetails', {bookId: book.id});. Pero las cosas no funcionan al recargar la página

"No se puede OBTENER /bookDetails?bookId=123.456"

en el controlador:

$scope.viewBookDetails = function() {
    $state.go('bookDetails', {bookId: book.id});
}

en la vista

<a href="" ng-click="viewBookDetails(); $event.stopPropagation();">

en el enrutador:

.state('bookDetails', {
    url: '/bookDetails?bookId'
}

en el navegador:

https://example.com/bookDetails?bookId=123.456

El enlace funciona si el "punto" se reemplaza con%2E en el navegador

Intentamos reemplazar "punto" con "% 2E" en el parámetro para $ state.go ()

$scope.viewBookDetails = function() {
    $state.go('bookDetails', {bookId: book.id.split('.').join('%2E')});
}

pero no funciona porque el "%" se codifica automáticamente y el "punto" en el navegador se reemplaza por "% 252E"

https://example.com/bookDetails?bookId=123%252E456