具有包含“点"的 url 查询参数的 Angular ui-router [英] Angular ui-router with url query parameter containing a "dot"

问题描述

在我们的 Angular 应用程序中，我们必须处理包含点"的 id.例如:

In our Angular app we have to deal with id's that contain a "dot". For example:

book = {
  id: '123.456'
}

我们在使用此类 id 作为 url 参数时遇到问题.如果通过Angular"进行导航，即单击调用 $state.go('bookDetails', {bookId: book.id}); 的链接，则一切正常.但是重新加载页面时事情不起作用

We have problems using such id's as url parameters. All works well if navigation occurs through "Angular", namely clicking on the link that invokes $state.go('bookDetails', {bookId: book.id});. But things do not work when reloading the page

无法获取/bookDetails?bookId=123.456"

"Cannot GET /bookDetails?bookId=123.456"

在控制器中:

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

在视图中

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

在路由器中:

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

在浏览器中:

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

如果在浏览器中将点"替换为 %2E，则链接有效.

The link works if the "dot" is replaced with %2E in the browser.

我们尝试将 $state.go() 参数中的dot"替换为%2E"

We tried to replace "dot" with "%2E" in the parameter for $state.go()

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

但不起作用，因为%"是自动编码的，浏览器中的点"被%252E"代替

but does not work because the "%" is automatically encoded and the "dot" in the browser is replaced by "%252E"

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

推荐答案

我在使用包含点"的 url 查询参数时遇到的刷新问题是服务器问题.
这是由于我在 grunt 服务器设置中处理 html5mode(如果不是静态资源，则重定向到 index.html)的方式引起的

The refresh problem I was getting with a url query parameter containing a 'dot' is a server problem.
It is caused by the way I deal with html5mode (redirect to index.html if is not a static resource) in the grunt server settings

// The original grunt server settings
connect: {
  options: {
    port: 9000,
    // Change this to '0.0.0.0' to access the server from outside.
    hostname: 'localhost',
    livereload: 35729
  },
  livereload: {
    options: {
      open: true,
      middleware: function (connect) {
        return [
          require('connect-modrewrite')(['^[^\.]*$ /index.html [L]']), //Matches everything that does not contain a '.' (period) and causes the problem
          connect.static('.tmp'),
          connect().use(
            '/bower_components',
            connect.static('./bower_components')
          ),
          connect().use(
            '/app/styles',
            connect.static('./app/styles')
          ),
          connect.static(appConfig.app)
        ];
      }
    }
  },

我变了

require('connect-modrewrite')(['^[^\.]*$ /index.html [L]']),

到

require('connect-modrewrite')([
  '!\.html|\.js|\.css|\.svg|\.jp(e?)g|\.png|\.gif|\.ttf$ /index.html'
]),

这篇关于具有包含“点"的 url 查询参数的 Angular ui-router的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！