Как сделать внутреннюю прокрутку для разных частей страницы и другой страницы, когда я создаю динамические маршруты для детей с использованием aurelia?

Question

я применил ту же логику, как указано на ответе на вопрос №: 34486644 или увидеть ссылку

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

Но проблема это показывает «маршрут не найден».

В моей JS файл я добавил:

JS File Route not Found error

Кроме того, у меня есть # в моем приложении URL [локальный/имя_приложения/#/имя_модуля] Ли # создает некоторые проблемы? Если нет, то в чем проблема?

образцы кода, которые я использую:

Для динамического маршрута: 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' } 
       ] 
      } 
     } 

Для 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

Так что это проблема не принимает правильный маршрут, я нашел решение правильно перемещаться.

1) Добавить событие щелчка на ваш HREF в HTML файл

<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) В вашем JS файл

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) Создать правильный маршрут

{ 
     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' } 
      ] 
     } 
    }