framework7 html页面中不能执行js代码

Question

index.html有一个超链接点击到about.html，已简单配置好路由。
about.html页面有一些js代码。
如果是从index.html点击到about.html，about.html里的js代码无法执行。如果是直接打开about.html这个页面，js是可以执行的，请问这是什么原理呢？
同样的，如果在about.html页面直接写css样式或者引用外部样式，也是不能执行的。

index.html代码片段

<div id="app">
    <div class="statusbar"></div>
    <div class="view view-main">
        <div class="page">
            <div class="page-content">
                <p>Page content goes here</p>
                <a href="/about/">About app</a>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="f7/js/min.js"></script>
<script type="text/javascript" src="f7/js/app.js"></script>

about.html代码片段

<div id="app">
    <div class="statusbar"></div>
    <div class="view view-main">
        <div class="page">
            <div class="page-content">
                <p>
                    <a href="#" class="button button-raised open-toast-center">Toast on Center</a>
                </p>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="f7/js/min.js"></script>
<script type="text/javascript" src="f7/js/app.js"></script>
<script>
    var toastCenter = app.toast.create({
        text: 'I\'m on center',
        position: 'center',
        closeTimeout: 2000,
    });
    $$('.open-toast-center').on('click', function () {
        toastCenter.open();
    });
</script>
</body>
</html>

在外网看到一些答案，有的说要用页面回调，但是我使用的这版framework7（v3.6.5）好像没有页面回调的功能。
试过
$$(document).on('page:init', '.page[data-name="about"]', function (e) {

console.log('2');

})

app.onPageInit('about', function(){

console.log('2');

});

都没效果。

Answer 1

针对Framework7 5.1.1版本：

在app.js中写上about页面的初始化加载函数
$$(document).on('page:init', '.page[data-name="about"]', function (e) {
这里写你的about页面的js代码
});