framework7-vue ^2.x pushState

以前碰過一點 framework7，昨天試了一下framework7-vue ^2.3.0，在需要將 pushState 設定為 true 時發現之前的用法無效：

// 1.0 之前
new Vue({
    el: '#app',
    template: '<app/>',
    // Init Framework7 by passing parameters here
    framework7: {
        root: '#app',
        /* Uncomment to enable Material theme: */
        // material: true,
        routes: Routes,
        pushState: true,
        pushStateSeparator: '#',
        ...
    },

隨後找了下 官網文件 有說明，

// Note that all following parameters can be used in global app parameters under view property to set defaults for all views. For example:
var app = new Framework7({
  view: {
    iosDynamicNavbar: false,
    xhrCache: false,
  }
});

TIM截圖20180531094847.png

就是view的屬性需要設定在 framework7 物件的view屬性上，如下：

new Vue({
  el: '#app',
  template: '<App/>',
  framework7: {
    id: 'com.it1025.m',
    name: 'framework7-vue-demo',
    theme: 'ios', // auto, ios, material
    view: {  // 注意這裡 pushState 是 view 的屬性，直接是直接掛在 framework7 上
      pushState: true,
      pushStateSeparator: '#',
    },
    routes: Routes
  },
  // router,
  components: {App}
});

之後 pushState 就有效了：

TIM截圖20180531095505.png