现在使用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
});
}
}