天天看点

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
      });
    }
  }
           

继续阅读