Framework7解決浏覽器傳回問題

現在使用Vue、React架構開發前端應用的人越來越多，配套的周邊插件、UI庫也應育而生，使用它們很容易就開發出非常漂亮且實用的前端應用和網站。

單頁面應用的好處很多，一次加載，全程流暢，還有切換動畫，體驗良好，但在浏覽器或者手機端的Webview上，使用者想要傳回就會直覺的按下傳回鍵，這對單頁面應用簡直是災難，本身就一個浏覽器頁面殼，實體傳回的結果是直接退出我們的網站。

但你不能教育你的使用者不要這麼傳回，應該點頁面上的傳回功能，是以隻能自己想辦法解決。

以 Framework7 為例，配置好 pushState 就可以讓使用者像通路多頁面網站操作傳回我們的單頁面應用。

在 f7param 中設定 view 的參數，以前的版本是直接修改 new Framework7({ pushState: true})

export default {
    data() {
      return {
        // Framework7 Parameters
        f7params: {
          name: 'uni', // App name
          theme: 'ios', // Automatic theme detection
          // App root data
          data: function () {
            return {
              user: {
                firstName: 'John',
                lastName: 'Doe',
              },

            };
          },
          view: {
            pushState: true,
            pushStateSeparator: '#!',
            pushStateAnimate: true,
            // pushStateRoot: '/',
          },

          // App routes
          routes: routes,
        },

        // Login screen data
        username: '',
        password: '',
      }
    },
    methods: {
      alertLoginData() {
        this.$f7.dialog.alert('Username: ' + this.username + '<br>Password: ' + this.password);
      }
    },
    mounted() {
      this.$f7ready((f7) => {

        // Call F7 APIs here
      });
    }
  }