-
-
Notifications
You must be signed in to change notification settings - Fork 3.2k
Description
- 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 {};
}
}
};