Which route is currently selected?

[zdarovka]

Hi, is there any way how to get which route is currently active/selected? I would like it to know especially on the first load of the site

App-routes have an 'active' attribute when they are active. But that doesn't seem right to chceck which route has this attribute.

[erikringsmuth]

Checking the active attribute is valid.

var activeRoute = document.querySelector('app-route[active]');

Otherwise the router has an activeRoute property.

var router = document.querySelector('app-router');
var activeRoute = router.activeRoute;

[zdarovka]

Where should I call document.querySelector('app-router') ? It returned null everywhere I tried it.

[erikringsmuth]

In theory it should be as simple as this.

<app-router>
  <app-route path="/home" import="pages/home-page.html"></app-route>
  <app-route path="*" import="pages/not-found-page.html"></app-route>
</app-router>
<script>
  var router = document.querySelector('app-router');
  var activeRoute = router.activeRoute;
</script>

If this doesn't work could you post some example code with the way you're trying to access it?

[zdarovka]

Don't know what am I doing wrong. It is stil null. This code is inside my custom polymer element template

<link rel="import" href="../app-router/app-router.html">

<div class="content">
                    <app-router>
                        <app-route path="/login" import="../../Views/st-login-page.html" element="st-login-page"></app-route>
                        <!--<template repeat="{{link in links}}">
                                <app-route path="{{link.href}}" import="{{link.file}}" element="{{link.element}}"></app-route>
                            </template>-->

                    </app-router>
                    <script>
                        var router = document.querySelector('app-router');
                        console.log(router);

                        var activeRoute = router.activeRoute;
                        console.log(activeRoute);
                    </script>
                </div>

[zdarovka]

I found what was wrong. I had to user /deep/ selector because it was in shadow dom

Thank you for you time, help and for this great module