Managing Complex Navigation Stacks with the Framework7 Router

The SPA Navigation Dilemma

Building a Single Page Application (SPA) often leads to a frustrating trade-off: you either have a simple linear history that feels like a website, or a complex nested navigation structure that feels like a native app but breaks the browser's back button. When users dive deep into a profile, then into a settings menu, and then into a specific preference page, a standard linear router often fails to maintain the expected state of the "previous" screen.

The Framework7 Router solves this by decoupling the URL from the View. In Framework7, a View is an independent navigation stack. This allows you to maintain multiple separate histories—such as a main content area and a side panel—simultaneously without them interfering with each other.

Defining Route Logic and Parameters

Routing in Framework7 is centered around a routes array. Instead of mapping a URL to a static file, you map a path to a configuration object. This object defines how the page is loaded and how data is passed.

Dynamic content is handled via route parameters. By using curly braces in the path (e.g., /user/{id}), the router automatically parses the URL and injects the value into the route's parameters object. This is essential for creating templates that render different data based on the URL without needing unique route definitions for every single database entry.

Implementation: Dynamic User Profiles

To implement a dynamic navigation flow, you must define your routes and then trigger navigation programmatically or via links. The following example assumes a standard Framework7 setup using the Core or Vue/React versions.

// Define the routes array
const routes = [
  {
    path: '/',
    content: '<div>Home Page</div>',
  },
  {
    path: '/user/{id}',
    // Use content for inline HTML templates, or load external files as needed
    content: '<div>User Profile Page</div>',
    onEnter: function (router, route, params) {
      // Access the {id} parameter from the URL
      console.log('Loading profile for user ID:', params.id);
    },
  },
];

// Initialize the app and the main view
var app = new Framework7({
  root: '#app',
  routes: routes,
});

var mainView = app.views.create('.view-main');

// Example: Navigating to a specific user
// Run this in the browser console or within a button click handler
mainView.router.navigate('/user/123');

Verification Steps

• Check the URL: After running navigate('/user/123'), verify the browser address bar updates to reflect the path.
• Verify Params: Check the developer console to ensure params.id correctly outputs 123.
• Test History: Click the browser's back button; the router should return you to the root path (/) without a full page reload.

The Trade-off: Memory and Deep Linking

While independent views provide native-like navigation, they introduce two specific engineering challenges:

DOM Accumulation

Framework7 keeps previous pages in the DOM to allow for instant "back" transitions. If your pages contain heavy custom components or third-party libraries (like complex charts or maps), these elements remain in memory even when not visible. To prevent memory leaks, use the pageBeforeRemove or pageAfterRemove hooks to manually destroy heavy instances.

The Server-Side 404

Because the router handles navigation on the client side, the server knows nothing about /user/123. If a user refreshes the page or shares a link, the server will return a 404 error. To fix this, your web server (Nginx, Apache, or Node) must be configured to redirect all non-file requests to index.html, allowing the Framework7 Router to take over and parse the URL on load.

Actionable Summary

To move from a basic site to a robust SPA, stop thinking of your app as a collection of pages and start thinking of it as a collection of Views. Use route parameters for dynamic data, implement server-side redirects for deep linking, and always clean up heavy DOM elements during page transitions to maintain performance.