javascript - vue - Configure el enrutador secundario para componer módulos en el enlace html del viewport del enrutador principal

change title of page with vue js

Question

Objetivo: Deseo los beneficios de segregación y encapsulación de la utilización de enrutadores infantiles para organizar rutas por áreas importantes de la aplicación. Sin embargo, quiero tener esas rutas manejadas y compuestas por el enlace de la ventana gráfica del enrutador principal. es decir

<div id="parentRouterViewport" data-bind="router: { cacheViews: true }"><div>

Hasta ahora, todo lo que he intentado, incluyendo hacer llamadas al enrutador principal para delegar la ruta (como un experimento), ha fallado. Haciéndome preguntarme si esto es posible.

Para mayor brevedad, solo incluyo las secciones del código crítico de la misión para el enrutamiento.

shell.js

return {
        router: router,
        activate: function() {
            return router.map([
                    { route: ''App*splat'', moduleId: ''app/home/viewmodels/index'', title: ''Home'', nav: true }
                ]).buildNavigationModel()
                .mapUnknownRoutes(''app/home/viewmodels/error'')
                .activate();
        }
    };

shell.html

<div id="content" data-bind="router: { cacheViews: true }"></div>

index.js (módulo de enrutamiento hijo)

var childRouter = router.createChildRouter()
        .makeRelative({
            moduleId: ''app/home/viewmodels'',
            fromParent: true
        }).map([
            { route: ''EligibiltySearch'',    moduleId: ''eligibilitySearch'',  title: ''Eligibility Search'',    nav: true }
        ]).buildNavigationModel();

    return {
        router: childRouter
    };
});

La única forma en que esto funciona es si coloco un enlace de vista de enrutador en mi vista index.html correspondiente. Sin embargo, esto no es lo que busco, basado en el diseño css y el aspecto de la página que estoy tratando de diseñar. Todo se debe representar como un panel y cambiarse por un panel diferente cada vez que se golpea una ruta. Actualmente, este enfoque tendrá dos paneles abiertos constantemente. Echa un vistazo a la foto de abajo para un mejor contexto sobre lo que quiero decir.

Answer 1

En nuestro equipo, hemos creado nuestros propios "enrutadores secundarios" mediante el uso de variables Knockout para mostrar / ocultar las subvistas basadas en el clic del botón de la pestaña. Una advertencia con esto es que tendrá que llamar a su activación, desactivación, composición completa, etc. desde la vista principal / principal para que el subView funcione. Hay algunos otros errores, pero pensé que te daría esto como una opción u otros que vean esta pregunta más adelante.