Unexpected behavior in navigation

#1

I have an app where I’m using a link to navigate from one view (Page A) to another (Page B). Page B has a “back” button that navigates back to Page A. When I launch the app, Page A is the default view. When I do the following:

  1. Launch the app (Page A displayed – browser tab says Page A)
  2. Click the link for Page B (Page B displayed – browser tab says Page B)
  3. Click the back button to go back to Page A (Page A displayed – browser tab says Page A)
  4. Click the browser back button (Page A displayed – browser tab says Page B)
  5. Click the browser back button again (Page A displayed – browser tab says Page A)

Notice what is happening in item 4. The view does not change, but the title in the browser tab does. Something in the Aurelia navigation system seems to recognize that the page is supposed to change in that the title displayed in the browser tab changes, but the view never gets changed.

My code looks like this:

app.js

configureRouter(config, router){
    this.router = router;
    config.options.pushState = true;
    config.options.root = "/"
    config.map([
        { route: ["","./pageA"], name: "pageA", title: "Page A", moduleId: PLATFORM.moduleName('./pageA'), nav: false },
        { route: "./pageB", name: "pageB", title: "Page B", moduleId: PLATFORM.moduleName('./pageB'), nav: false}
    ]);

pageA.html

<template>
    <h1>Page A</h1>
    <a route-href="route: pageB">Page B</a>
</template>

pageB.html

<template>
    <h1>Page B</h1>
    <button type="button" click.delegate="navigate()">Back</button>
</template>

pageB.ts

import { Router} from 'aurelia-router'

export class PageB {
    static inject = [Router]
    constructor(private router: Router){}
    public navigate(){
        this.router.navigateToRoute('pageA');
    }
}

So, I’m curious why the navigation system updates the tab title when the browser back button is pressed but does not update the view.

0 Likes