Framework7 Router vs. Vue Router: Pick the Right Navigation for Hybrid Apps

The problem: Vue Router does not know what a Framework7 page is

You are starting a Framework7 project with the Vue binding. The app needs a tab bar, a side panel, modals, and swipe-back navigation between screens. Because you already know Vue Router, it feels natural to install it and define routes the usual way. But Framework7 pages, panels, and modals are not ordinary Vue components mounted by a route. They are Framework7 UI elements with their own transition animations, history stack, and lifecycle hooks. If you use Vue Router alone, you will likely spend time wiring every page change to Framework7 transitions and handling the Android hardware back button yourself.

The practical takeaway is to start with Framework7's built-in router for app-shell navigation. It understands Framework7 concepts natively, so page transitions, swipe-back gestures, modals, panels, and tabs work without extra configuration. Use a framework-native router such as Vue Router only when you have a specific need it solves, such as server-side rendering or deeply nested routes inside a single page.

What the built-in router controls

Framework7's router is universal across Core, Vue, React, and Svelte bindings. It manages page transitions, history, and component lifecycle. Because it knows about pages, modals, panels, and tabs, it applies iOS and Android transition animations and swipe-back gestures with zero configuration. Route definitions are arrays of objects with path, component, and async properties. It also supports lazy-loading through dynamic imports and route guards such as beforeEnter and beforeLeave that integrate with Framework7's component lifecycle.

Where Vue Router requires manual bridging

Vue Router and React Router are framework-native routers. They manage component mounting and URL history, but they do not know that a route change should trigger a Framework7 page transition. To get animations, you typically need custom wrappers or middleware that call Framework7's navigation methods after the route changes. You must also wire the hardware back button on Android so it pops the Framework7 view instead of closing the app. This bridging locks you into that framework's ecosystem and makes it harder to move later to React or Svelte if you choose the Framework7 bindings.

Worked example: routes with async loading and a guard

Create a minimal app to compare the two approaches. Open a terminal in your working directory and run:

npm create framework7@latest app-name

This scaffolds a new project. No special permissions are required, but it creates a new folder and installs dependencies, so review the generated files before committing them. The generated project typically includes a routes file such as src/routes.js. The following shape matches the documented array-of-routes pattern; confirm exact guard signatures in the Framework7 docs for your installed version.

export default [
  {
    path: '/',
    component: 'home-page',
  },
  {
    path: '/settings/',
    async: () => import('./pages/settings.vue'),
    beforeEnter: (route, to, resolve, reject) => {
      // Verify authentication or data here, then call resolve()
      resolve();
    },
  },
  {
    path: '/modal/',
    component: 'settings-modal',
  },
];

The async property enables lazy loading so the settings page is not bundled with the initial app. The beforeEnter guard runs before the route activates and integrates with Framework7's lifecycle. A modal route can use a Framework7 component directly, which the native router would not handle without extra wiring.

Trade-offs and when to switch

Limitations matter. TypeScript typings for the Framework7 router are less mature than Vue Router's first-party types, so auto-completion for route parameters and meta fields may be weaker. SSR is not officially supported with the Framework7 router; if your project requires server-side rendering, a native router with a custom Framework7 integration is the only viable path. Deep links and universal links work out of the box on Capacitor or Cordova, but custom URL schemes may still need native configuration regardless of router choice.

A useful hybrid split is to use the Framework7 router for the app shell—tabs, panels, modals, and top-level pages—and delegate complex nested routes inside a single page to the native router if you need familiar code-splitting patterns.

Practical check and closing

Before deciding, build a tap-through test in the iOS simulator. Navigate between two pages and swipe back. With the built-in router, the return transition should animate without extra code. With Vue Router, verify whether swipe-back still works and whether the Android hardware back button navigates history or exits the app. If the built-in router passes that check, start there. Add Vue Router only when you encounter a concrete limitation it solves.