Framework7 Router组件二次跳转后render函数上下文为空问题求助

这个问题是Framework7 v2.0.10到v2.1.2版本里的一个明确bug——当你完成「进入页面→返回→再次进入同一页面」的操作后，路由组件的render函数会丢失上下文，导致this变成undefined，和你描述的完全一致。

先明确问题核心 #

• 触发条件：页面跳转（比如进入About页）→ 返回上一页 → 再次进入同一页面
• 版本影响：v2.0.10首次出现，v2.1.2仍未修复；v2.0.6及之前版本无此问题
• 表现：第二次及之后进入页面时，render函数内调用this相关属性/方法会返回undefined

可行的临时解决方案 #

1. 手动绑定render函数的上下文

在组件的初始化方法里，显式把render绑定到组件实例，避免路由复用过程中丢失绑定：

const AboutPage = {
  render() {
    alert(this.pageTitle); // 原本这里的this会是undefined，绑定后正常
    return '<div class="page">' + this.pageTitle + '</div>';
  },
  init() {
    // 初始化时手动绑定上下文
    this.render = this.render.bind(this);
  },
  pageTitle: 'About Page'
};

2. 用ES6箭头函数定义render

箭头函数会自动捕获当前的上下文，不用手动绑定就能保留组件实例的this：

const AboutPage = {
  render: () => {
    alert(this.pageTitle); // 箭头函数会保留组件的上下文
    return '<div class="page">' + this.pageTitle + '</div>';
  },
  pageTitle: 'About Page'
};

3. 强制禁用页面复用

在路由配置里给对应页面加上reloadAll: true，让每次跳转都重新初始化组件，跳过缓存复用的逻辑：

const routes = [
  {
    path: '/about/',
    component: AboutPage,
    options: {
      reloadAll: true
    }
  }
];

问题根源 #

这个bug是因为v2.0.10之后Framework7优化了路由复用机制，但在页面缓存重新激活的逻辑里，漏掉了render函数的上下文绑定步骤——复用旧组件实例时，render的this没有重新指向当前实例，导致变成undefined。而v2.0.6的复用逻辑没有这个漏洞，所以能正常运行。

如果以上方案都不适用，你可以暂时回退到v2.0.6版本，同时建议在Framework7的官方仓库提交issue，附上你的复现步骤，帮助官方尽快修复这个问题。

内容的提问来源于stack exchange，提问作者Alexey Victorov