如果导航是由于点击导航栏,请在`activate`中知道

时间:2017-06-05 17:33:14

标签: aurelia

我正在尝试在我的应用程序中获得3种不同的路由“样式”。我需要在每个视图模型的activate方法中识别这些:

  1. 用户点击我的应用中的按钮或链接,导致我的应用调用this.router.navigate()
    • 这个很简单,因为我总是在URL中添加一个参数,所以在目标View-Model中,我在activate方法中有了这个参数。
  2. 用户按下后退或前进按钮或首次加载应用程序。
    • 我也可以通过使用this.router.isExplicitNavigation变量或检查我的状态是否未正式化来实现此目的。
  3. 用户点击nav-bar中显示的其中一个视图(app.ts configureRouter方法中的设置)。
    • 不幸的是,当用户按下浏览器上的后退和前进按钮时,我找不到区分这个的方法。
  4. 所以这是我的问题,有没有办法知道何时调用了视图模型的activate方法,因为用户选择了nav-bar路线?

1 个答案:

答案 0 :(得分:1)

如果我正确理解了您的问题,您需要区分1.和3.在activate()中,您将收到所有路由参数(作为方法的第一个参数),两者:

    来自路径模板的
  • ,例如/myRoute/:myparam
  • 来自查询字符串

因此,我建议为菜单栏添加一个查询参数,您可以在activate()中阅读该参数。例如:

  • 让我们说出你的路线/myRoute
  • 从按钮开始,只需导航到/myRoute
  • 即可
  • 从导航栏中导航至/myRoute?from=navbar

您可能知道这一点,但您可以通过多种方式从代码导航:

  • router.navigate('compose your route manually')
  • router.navigateToRoute('route's name', parameters)
  • 在模板中,使用<a route-href="route: 'myRoute'; params.bind={...}" >

您的代码:

//button
router.navigateToRoute('my-route');

//navbar
router.navigateToRoute('my-route', {from: 'navbar'});

//destination view-model
activate(params: Object): void {
    if (params.from === 'navbar')
        //routed from the navbar
    else
        //routed from a button
}