How can I redirect to another view-model in Aurelia JS?

Question

I'm writing an application using Aurelia JS. How can I redirect to another URL? Is there a way to do it without creating a whole new navigation pipeline step?

Thanks

Depending on your use case, I believe the `canActivate` method can return a route instruction object, like this: `{ redirect: '#/someRoute' }` — Matthew James Davis, Mar 02 '15 at 15:26

score 51 · Accepted Answer · edited Apr 16 '18 at 16:04

51

to do that inject the router in the ViewModel and use the method navigate(route)

here is an example:

import {Router} from 'aurelia-router';

export class MyVM {

  static inject() { return [Router]; }

  constructor(router){
    this.router = router;
  }

  someMethod(){
    this.router.navigate("myroute");
  }
}

edited Apr 16 '18 at 16:04

Jesse

3,522
6
25
40

answered Mar 02 '15 at 03:44

Daniel Camarda

1,126
12
18

1

this.storage is definetly not needed (copy-paste from some of my code) i just tested it without the hash and it seems to work but generating a slightly different hash in the url... "/myroute" gives you http://mydomain/#myurl while "#/myroute" generates http://mydomain/#/myurl but i think there is no need for the '/' at the beginning so i'm removing it from the code :) – Daniel Camarda Mar 02 '15 at 03:58
@DanielCamarda Hi Daniel, is the exception thrown when calling it 'router' a bug? I was experiencing the same thing and it was driving me mad. EDIT: Just spotted the post below by Rob. – mbx-mbx Mar 09 '15 at 12:28
yeah :) just edited the answer to add @EisenbergEffect reference to the bug – Daniel Camarda Mar 09 '15 at 18:54
@SunjayVarma "The this.storage line probably shouldn't be there. " This is confusing. For me I needed a this. for the router to be accessible to the class methods. – CSSian May 10 '15 at 23:01
@KevinM I deleted that comment. It was in reference to some code that was there which Daniel then edited out. – Sunjay Varma May 11 '15 at 18:04
In the latest version this method is changed to `navigateToRoute`. – Suhas Jan 01 '16 at 16:47

jeff-h · Answer 2 · 2016-05-09T06:34:55.233

21

Just thought I'd update @Daniel Camarda's excellent answer a little. As of Feb 2016 you can use Aurelia's inject decorator. Also, the router naming issue has been resolved.

import {inject} from 'aurelia-framework';
import {Router} from 'aurelia-router';


@inject(Router)
export class MyVM {

  constructor(router){
    this.router = router;
  }

  someMethod(){
    this.router.navigate("myroute");
  }
}

edited May 09 '16 at 06:34

answered Feb 28 '16 at 09:22

jeff-h

2,184
1
22
33

score 17 · Answer 3 · answered Mar 02 '15 at 03:48

17

Quick bit of related info: The naming issue with "router" is something we are tracking here: https://github.com/aurelia/router/issues/34 If you are reading this answer later, and this issue has been closed, then you should be able to safely name your property "router" if you so choose.

answered Mar 02 '15 at 03:48

EisenbergEffect

3,989
22
26

3

To save anyone checking, @EisenbergEffect closed this issue March 2015. – jeff-h Feb 28 '16 at 09:23

score 8 · Answer 4 · answered Mar 14 '16 at 10:37

Perhaps a slightly different use-case, but posting since it's so similar: Upon entering a view, based on e.g. parameters, I want to redirect to a different view. This must happen in activate() or canActivate().

In this case, both navigate() and navigateToRoute() suggested above does not work.

What does work however is return new Redirect('....') where Redirect is imported from aurelia-router, like this:

canActivate(param) {
    if (param.id == null)
        return new Redirect('/viewWhichDoesntNeedParam')
}

How can I redirect to another view-model in Aurelia JS?

4 Answers4