When backing, there is a second mounted BUG on the root router
- 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 {};
}
} };
Source: framework7io/framework7