Skip to content

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

@beanhacker

Description

@beanhacker
  • 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 {};
}

}
};

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions