feat: add router-ignore attribute to let the browser handle navigation (

#421)

Fixes: #325

demo/vaadin-router-getting-started-demos.html

@@ -245,6 +245,32 @@ <h3>Base URL</h3>
         </script>
       </template>
     </vaadin-demo-snippet>
+
+    <h3>Excluded links</h3>
+    <p>Vaadin Router can ignore a link if <code>router-ignore</code>
+      parameter is added to the <code>a</code> tag.
+    </p>
+    <vaadin-demo-snippet id="vaadin-router-getting-started-demo-ignore" iframe-src="iframe.html">
+      <template preserve-content>
+        <nav>
+          <a href="/">Home</a>
+          <!-- not handled as indicated by router-ignore attribute -->
+          <a href="/users" router-ignore>Users</a>
+        </nav>
+
+        <main></main>
+
+        <script>
+          // import {Router} from '@vaadin/router'; // for Webpack / Polymer CLI
+          // const Router = Vaadin.Router; // for vaadin-router.umd.js
+
+          const router = new Router(document.querySelector('main'));
+          router.setRoutes([
+            {path: '/', component: 'x-home-view'},
+          ]);
+        </script>
+      </template>
+    </vaadin-demo-snippet>
   </template>
   <script>
     class VaadinRouterGettingStartedDemos extends DemoReadyEventEmitter(ElementDemo(Polymer.Element)) {

demo/vaadin-router-navigation-trigger-demos.html

@@ -80,7 +80,8 @@ <h3><code>NavigationTrigger.CLICK</code></h3>
       <code>&lt;a&gt;</code> elements on the the page and converts them into
       navigation events for Vaadin Router if they refer to a
       location within the app. That allows using regular <code>&lt;a&gt;</code>
-      link elements for in-app navigation.
+      link elements for in-app navigation. You can use <code>router-ignore</code>
+      attribute to have the router ignore the link.
     </p>
     <vaadin-demo-snippet id="vaadin-router-navigation-trigger-demo-2" iframe-src="iframe.html">
       <template preserve-content>

src/triggers/click.js

@@ -68,6 +68,11 @@ function vaadinRouterGlobalClickHandler(event) {
     return;
   }
 
+  // ignore the click if the <a> element has the 'router-ignore' attribute
+  if (anchor.hasAttribute('router-ignore')) {
+    return;
+  }
+
   // ignore the click if the target URL is a fragment on the current page
   if (anchor.pathname === window.location.pathname && anchor.hash !== '') {
     return;

test/triggers/click.spec.html

@@ -24,6 +24,7 @@
     </a>
     <a id="in-app-target-blank" target="_blank" href="in-app/link">in-app/link (target="_blank")</a>
     <a id="in-app-download" download href="in-app/link">in-app/link (download)</a>
+    <a id="ignore-link" router-ignore href="ignore-this-link">ignore (router-ignore)</a>
     <a id="external" href="http://example.com/in-app/link">http://example.com/in-app/link</a>
     <a id="cross-origin" href="[same domain, different port]">[same domain, different port]</a>
     <div id="shadow-host-with-a-link" class="shadow-host">
@@ -351,6 +352,11 @@
               expectClickIgnored();
             });
 
+            it('should ignore `click` events on links with a `router-ignore` attribute', () => {
+              emulateClick(document.getElementById('ignore-link'));
+              expectClickIgnored();
+            });
+
             it('should ignore `click` events with prevented default action', () => {
               emulateClick(document.getElementById('in-app-prevented'));
               expect(navigateEvents).to.have.lengthOf(0);