vue项目记录移动端页面浏览位置

Posted 2023-04-27

参考技术A 描述:假设b、c两个页面
需求:b到c页面的时候需要记录当前b的浏览位置，c返回到b的时候滚动到上次浏览的位置

实现方法:将滚动距离存在vuex、beforeRouteLeave

1.首先在vuex中state定义一个变量来记录当前的浏览的位置

2.在需要的页面中,也就是b页面使用了beforeRouteLeave 来记录没有路由离开的时候当前浏览的位置

其中to.meta.touFlag 是自己定义的，因为需要跳转的页面很多，这样比较方便，在需要的页面路由上加一个参数就好了

3.最后一步就是在每次b页面获取完数据的时候使用 nextTick ,让页面恢复到上次浏览的位置,一定要使用this.$nextTick

vue 项目判断是PC端还是移动端

参考技术A 这些js可以另外建一个.js的文件来写，到时候导出使用
有关浏览器类型的信息都藏在USER-AGENT里面，首先读取navigator.userAgent里面的信息，为了方便利用toLowerCase方法转成小写的形式。
1.判断是否是微信环境的

2.判断是否是移动端的环境

3.我的项目是移动端和pc端写在一个项目里面的，没有分开写，但是页面和路由有分开，如果是移动端的，我会在前面加一个/mb/xxx/:id的路由，如果是pc端的，我会在路由里面/pc/xxx/:id这样来写，到时候在mian.js里面做一个判断

4.在main.js导入，然后做一个判断

大概就是这些，有些东西有删减，可能不是很完整