Wie interne Scrollen für verschiedene Teile der Seite und andere Seite auch, wenn ich dynamische Kind Routen mit Aurelia erstellen?

Question

I gleiche Logik angewendet haben wie auf der Antwort der Nein Frage gegeben: 34486644 oder den Link sehen

How do I use a router and inbuilt/custom attributes to create dropdown menu in aurelia?

Aber das Problem ist, es zeigt „Route nicht gefunden“.

In meinem JS-Datei i hinzugefügt haben:

JS File Route not Found error

Auch ich habe # in meiner App-URL [localhost/appname/#/Modulname] Ist die # ein Problem schafft? Wenn nicht, was ist das Problem?

Code-Beispiele, die ich verwende:

Für dynamische Route: moduleName.js

{ 
      route: 'Services', 
      name: 'Services', 
      nav: true, 
      title: 'Services', 
      moduleId: 'App/modulename/compdemo1', 
      settings: { 
       subMenu: [ 
        { href: '#/ServicesSM1', title: 'Services 1' }, 
        { href: '#/ServicesSM2', title: 'Services 2' }, 
        { href: '#/ServicesSM3', title: 'Services 3' }, 
        { href: '#/ServicesSM4', title: 'Services 4' } 
       ] 
      } 
     } 

Für HTML: modulename.html

<li repeat.for="route of router.navigation"> 
       <!-- if route has no submenu --> 
       <a href.bind="route.href" if.bind="!route.settings.subMenu">${route.title}</a> 

       <!-- if route has submenu --> 
       <a href ="javascript:void(0);" if.bind="route.settings.subMenu"> 
       ${route.title}></a> 

       <!--<label if.bind="route.settings.subMenu">${route.title</label>--> 

       <ul if.bind="route.settings.subMenu"> 
        <li repeat.for="menu of route.settings.subMenu"> 
         <a href.bind="menu.href">${menu.title}</a> 
        </li> 
       </ul> 
      </li> 

Answer 1

Das Problem ist also nicht statt Die richtige Route, ich habe die Lösung gefunden, um es richtig zu navigieren.

1) ein Click-Ereignis auf Ihre href in HTML-Datei

<div> 
     <ul> 
      <li repeat.for="route of router.navigation"> 
       <!-- if route has no submenu --> 
       <a href.bind="route.href" if.bind="!route.settings.subMenu">${route.title}</a> 

       <!-- if route has submenu --> 
       <a href.bind="route.href" if.bind="route.settings.subMenu">${route.title}</a> 
       <ul if.bind="route.settings.subMenu"> 
        <li repeat.for="menu of route.settings.subMenu"> 
         <a href="javascript:void(0);" id="subMenu" click.delegate="$parent.$parent.navigator($parent.route, menu)">${menu.title}</a> 
        </li> 
       </ul> 
      </li> 
     </ul> 
    </div> 
<div> 
      <router-view></router-view> 
     </div> 

2) hinzufügen In Ihrer JS-Datei

navigator(row, arg1) { 
    //To create a proper navigation for the page. 
    this.router.navigate(row.relativeHref + '?q=' + arg1.href); 

    //To perform performance internal scrolling. 
    var dest = 0; 

    if (typeof ($('#' + arg1.href).offset()) !== "undefined") { 
     if ($('#' + arg1.href).offset().top > $(document).height() - $(window).height()) { 
      dest = $(document).height() - $(window).height(); 
     } else { 
      dest = $('#' + arg1.href).offset().top; 
     } 
     $('html,body').animate({ scrollTop: dest }, 1000, 'swing'); 
    } 
} 

3) Erstellen Sie die richtige Route

{ 
     route: 'Services', 
     name: 'Services', 
     nav: true, 
     title: 'Services', 
     moduleId: 'App/modulename/compdemo1', 
     settings: { 
      subMenu: [ 
       { href: 'SM1', title: 'Services 1' }, 
       { href: 'SM2', title: 'Services 2' }, 
       { href: 'SM3', title: 'Services 3' }, 
       { href: 'SM4', title: 'Services 4' } 
      ] 
     } 
    }