页面刷新后，Angular UI路由松散的url参数答案

【问题标题】：Angular UI routing loose url parameters after page refresh页面刷新后，Angular UI路由松散的url参数
【发布时间】：2017-01-19 17:51:59
【问题描述】：

页面刷新后如何保留状态的url参数？

我有这个状态

   .state('App.State', {
        abstract: true,
        url: '/App/:param',
        templateUrl: '/page.html',
        controller: 'pageCtrl',
        params: {
            'param': null,
        },

    })

我用这个命令进入这个状态

<a ui-sref="App.State({param: paramName})">{{paramName}}</a>

我带着我想要的参数进入状态，但是当我刷新页面（f5）时我失去了参数，页面刷新后如何保持它们？

【问题讨论】：

标签： angularjs parameters angular-ui-router page-refresh

【解决方案1】：

有一个plunker 确实会从您的代码中删除abstract: true：

.state('App', {
      template: '<div ui-view ></div>',
})
.state('App.State', {
      //abstract: true,
      url: '/App/:param',
      templateUrl: 'page.html',
      controller: 'pageCtrl',
      params: {
        'param': null,
      },
    })

然后我们可以使用任何类型的 url（甚至是之后的 F5）来到达那个状态

以防万一，我们希望保持该状态抽象 - 我们无法导航到它。我们需要它的孩子。有other plunker

.state('App', {
      template: '<div ui-view ></div>',
})
.state('App.State', {
      //abstract: true,
      url: '/App/:param',
      templateUrl: 'page.html',
      controller: 'pageCtrl',
      params: {
        'param': null,
      },
})
.state('App.State.Child', {
      url: "/",
      template: '<h4> App.State.Child </h4>',
})

ui-sref 不能是

<a ui-sref="App.State({param: 'xxx'})">
  -- not working while abstract

我们必须去找孩子

<a ui-sref="App.State.Child({param: 'yyy'})">

然后这些将起作用

【讨论】：

第二种方法（保持抽象状态）是否适用于多个参数，即参数对象有两个键，但路径中只显示一个？ link
重点是.. url 是唯一的部分 - 它将在刷新 （或发送 url 并稍后打开它）后继续存在 答案没有。只有url 的东西会存活下来。希望它有所帮助；）享受 UI-Router
请看看这个question。您能否提出一个更好的方法来实现同样的目标？

【解决方案2】：

要保持这些值，您应该像这样在 url 中添加参数：

url: '/App/:param'

并删除 params 属性。

【讨论】：