When backing, there is a second mounted BUG on the root router
还没有人认领这个 Issue。
评估
- 难度
- 4/5
- 预计耗时
- 3-5 天
- 新手友好度
- 38/100
- Issue 类型
- 缺陷
- 描述清晰度
- 需要澄清
- 活跃度
- 冷清
- 技术栈
- javascript
- 领域
- mobile
调研方向
先从提供的 getRouter 和 back 流程开始，然后检查 Framework7 Vue router 在 router.back(1, { animate: true, reload: false }) 附近的生命周期行为。使用 Framework7 9.0.0 和 Vue 3.4.4 在 Chrome 中复现，并确定 root router mount 是否确实会再次运行；完成的标准是提供一个最小复现，以及已确认的原因或记录在案的预期行为。
由索引模型根据 Issue 内容生成。
描述
- 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 {};
}
}
};
- 主要语言
- JavaScript
- 星标
- 18.8k
- 派生
- 3.2k
- PR 合并指标
- 30 天内没有已合并 PR
环境准备
从这里开始
- 先读完整个 Issue，再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库，在一个分支上完成修改。
- 提交 Pull Request，并在描述里引用这个 Issue 编号。
framework7io/framework7 的其他 Issue
-
难度 2/5 1-3 小时 新手友好度 68/100
framework7io/framework7#4365 · 1 条评论 ·
-
propsHistory未关闭
难度 2/5 1-3 小时 新手友好度 72/100
framework7io/framework7#4347 · 1 条评论 ·
-
难度 2/5 1-3 小时 新手友好度 64/100
framework7io/framework7#4222 · 3 条评论 ·
-
难度 2/5 1-3 小时 新手友好度 65/100
framework7io/framework7#4175 · 1 条评论 ·
-
难度 2/5 1-3 小时 新手友好度 65/100
framework7io/framework7#3969 · 3 条评论 ·
查看 framework7io/framework7 的全部 Issue
相似的 Issue
-
agent/quality hive/hosted-available-lke648397-260827-5n31 quality testing
难度 1/5 1 小时以内 新手友好度 90/100
维护者通常 1 天内回复
-
难度 2/5 半天 新手友好度 78/100
jaegertracing/jaeger-ui#4512 ·
维护者通常 1 天内回复
-
feedback simulation workshop
难度 2/5 1-3 小时 新手友好度 84/100
githubnext/gh-aw-workshop#3857 ·
维护者通常 2 天内回复
-
area-clientside-dartpad
难度 2/5 1-3 小时 新手友好度 72/100
维护者通常 1 天内回复
-
难度 1/5 1 小时以内 新手友好度 72/100
quarkusio/extensions#3432 ·
维护者通常 1 天内回复