Question

如何在页面刷新后保持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）时，我松开了参数，如何在页面刷新后保留它们？

Answer 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,
      },
    })

然后我们可以使用任何类型的网址（甚至是后来的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'})">

然后这些将起作用

Answer 2

要维护这些值，您应该在网址中添加参数，如下所示：

url: '/App/:param'

删除params属性。

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

2 个答案: