app.js

// ...
config.map([
      {route: ['arraytest', 'arraytest/:test'], name: 'test', moduleId: 'arraytest/arraytest', title: 'test'}
      ]);
      // ...

arraytest.html

<template>
  <div repeat.for="val of values">${val}</div>
  <a if.bind="pathParam" href="#/arraytest">go to pure route</a>
  <a if.bind="!pathParam" href="#/test/arraypathparam">go to pathParam route</a>

</template>

arraytest.js

export class ArrayTest {
  values = [];
  pathParam = false;

  constructor() {
    this.values = [];
  }

  activate(pathParams) {
    this.values.length = 0; // I tried adding it here, doesn'T help
    if (pathParams && pathParams.test) {
      this.values.push('Path param route')
      this.pathParam = true;
    } else {
      this.values.push('Pure route')
      this.pathParam = false;
    }
    console.log('values', values); // Here the array will only ever have 1 value in it. yes the HTML shows many
  }

  deactivate() {
    this.values.length = 0;
  }
}