Angular ui-router 的 url 查询参数包含“点”

2023-11-25

在我们的 Angular 应用程序中,我们必须处理包含“点”的 id。例如:

book = {
  id: '123.456'
}

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

“无法获取/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在浏览器中。

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

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

但不起作用,因为“%”被自动编码,浏览器中的“点”被“%252E”替换

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

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

// 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]']),

to

require('connect-modrewrite')([
  '!\\.html|\\.js|\\.css|\\.svg|\\.jp(e?)g|\\.png|\\.gif|\\.ttf$ /index.html'
]),
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Angular ui-router 的 url 查询参数包含“点” 的相关文章

随机推荐