余烬路由查询参数

Question

我想用查询参数打开一个新的视角。

这意味着在我的index.hbs中，我单击一个按钮从输入字段中获取值。之后，我将在我的案例地图视图中打开一条新路线，路径为"/map"，并带有查询参数，例如

localhost:4200/map/?search=xyz

当我在索引控制器中执行此操作时：

queryparams:['location'],
location:null,

在我的路线上

  actions:{
    search(location){
      this.transitionTo('map-view');
  }
}

我立即进入我的索引网址

/?location=xcyxyx

但我想要在我的地图路线上

localhost:4200/map/?search=xyz

Answer 1

在控制器中定义search属性index.js使用它来queryParams值转换到map-view路由。

索引.hbs

{{input value=search}}
<br />
<button {{action 'transitionToLocation'}}> Search</button>

控制器/索引.js - 参考transitionToRoute

import Ember from 'ember';
export default Ember.Controller.extend({
  search:'india',
  actions:{
    transitionToLocation(){
      this.transitionToRoute('map-view',{queryParams: {search: this.get('search')}});
    }
  }
});

路线/地图视图.js
使用 refreshModel true 定义 queryParams search，这将强制触发beforeModel和model，并afterModel钩子以进行search属性更改。

import Ember from 'ember';
export default Ember.Route.extend({
  queryParams:{search: {refreshModel:true}},
});

Answer 2

查询参数将是"搜索"，因为这是您希望在URL中显示的内容。

语法可以在以下位置找到：https://guides.emberjs.com/v2.10.0/routing/query-params/

在该页面的下方，它显示了如何在使用 transitionTo 时指定查询参数。 希望这有帮助。