#4376·framework7

When backing, there is a second mounted BUG on the root router

Author: beanhackerCreated Jan 27, 2026Updated May 19, 2026
  • Framework7 version: V9.0.0
  • Vue.js version: V3.4.4
  • Platform and Target: Chrome browser

Describe the bug

I have encapsulated a ROUTE jump logic for global use, with the following JS content. But I encountered a problem in execution. When I advanced more than 2 pages, I called the back method without passing any parameters. Taking a step back would cause the root router/mounted method to be re executed. I have been debugging for a long time and still don't know why this happened. I have also looked at the official code. Please help me find out what caused the root node to be mounted again. Thank you!

To Reproduce

import UTILS from "./utils"; import { f7 } from 'framework7-vue';

function getRouter() { let router = null; if (window && window.document) { const mainViewEl = document.querySelector('#framework7-root .view-main'); if (mainViewEl && mainViewEl.f7View) { router = mainViewEl.f7View.router; console.log("get route from dom!"); } } if (!router && f7) { try { const currentView = f7.views?.current || f7.instance?.currentView; if (currentView) { router = currentView.router; console.log("get route from router!"); } } catch (e) { console.warn('[F7 Router] Fallback to f7 instance failed: ', e); } } return router; }

function getRoute() { const router = getRouter(); let route = { path: '', query: {}, url: '' }; if (router) { if (router.currentRoute) { route = router.currentRoute; } } return route; }

function getCurrentPath() { const route = getRoute(); let path = ''; if (route) { path = route.path; } return path; }

export default { open(link, params) { const router = getRouter(); if (!router) { console.warn('[F7 Router] Router instance not initialized, cannot navigate'); return; } let toPath = ''; let toParams = {}; if (UTILS.isString(link) && link) { toPath = link; toParams = params || {}; } else if (UTILS.isObject(link) && link.url) { toPath = link.url; toParams = link.params || link.param || {}; } else { console.warn('[F7 Router] no router link offered!'); return; } const url = UTILS.url.make(toPath, { d: JSON.stringify(toParams) }); router.navigate(url, { animate: true, preventDuplicate: true }); },

back(params) { console.log("exec back begin..."); const router = getRouter(); if (!router) { console.warn('[F7 Router] Router instance not initialized, cannot go back'); return; } const historyLen = router.history?.length || 0; if (historyLen <= 1) { console.log('[F7 Router] 无历史页面可回退,禁止操作'); return; } const currentPath = getCurrentPath(); if (currentPath === '/') { console.log('[F7 Router] Current path is root /, back is forbidden'); return; } const backOptions = { animate: true, reload: false }; console.log("run back logic", backOptions); if (UTILS.isNil(params)) { router.back(1, backOptions); } else { backOptions.state = { d: JSON.stringify(params) }; router.back(1, backOptions); }

console.log("run back logic finish", backOptions);

},

refresh() { const router = getRouter(); if (router) { router.refreshPage(); } },

getParam(name, defValue) { const allParams = this.getParams(); return UTILS.isNil(allParams[name]) ? defValue : allParams[name]; },

getParams() { const route = getRoute(); if (route.pageParams) { return Object.assign({}, route.pageParams); }

const query = route.query || {};
if (UTILS.isNil(query.d)) {
  route.pageParams = {};
  return {};
}
try {
  const data = UTILS.url.param.decode(query.d);
  const pageParams = JSON.parse(data) || {};
  route.pageParams = pageParams;
  return Object.assign({}, pageParams);
} catch (e) {
  console.error('[F7 Router] Parameter parsing failed: ', e);
  route.pageParams = {};
  return {};
}

} };