当我使用 aurelia 创建动态子路由时，如何对页面的不同部分和其他页面进行内部滚动？

Question

我应用了与问题编号：34486644 的答案相同的逻辑或查看 link

但问题是显示 "Route not Found"。

在我的 JS 文件中我添加了：

JS File Route not Found error

此外，我的应用程序中有 # url [localhost/appname/#/modulename] # 是否造成了一些问题？如果不是那么问题是什么？

我正在使用的代码示例：

对于动态路由：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)在 HTML 文件

中的 href 添加点击事件

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

当我使用 aurelia 创建动态子路由时，如何对页面的不同部分和其他页面进行内部滚动？

How to do internal scrolling in for different parts of page and other page also ,when i am creating dynamic child routes using aurelia?

submenu

aurelia