在Vue移动端应用中，记录页面浏览位置是一项常见的需求，尤其在用户导航于多个页面之间时，为了提供良好的用户体验，需要在用户返回时恢复之前的浏览状态。本文将详细讲解如何使用Vue和Vuex来实现这一功能。
我们需要在Vuex的状态(state)中定义一个变量来存储页面的滚动位置。例如，可以创建一个名为`carrerTouScroll`的对象，它包含一个`height`属性来保存滚动的距离：
```javascript
state: {
carrerTouScroll: {
height: ''
}
}
```
接着，我们需要在mutations中定义一个方法来更新这个状态。这里创建一个`setCarrerTouScroll`方法，接收滚动距离作为参数，并将其设置给`carrerTouScroll.height`：
```javascript
mutations: {
setCarrerTouScroll (state, distance) {
state.carrerTouScroll.height = distance
}
}
```
同时，为了在组件中方便地访问这个状态，可以定义一个getter方法：
```javascript
getters: {
getCarrerTou: state => state.carrerTouScroll
}
```
接下来，我们需要在需要记录浏览位置的页面中监听路由离开事件。这可以通过在组件的生命周期钩子`beforeRouteLeave`中实现。在该钩子中，我们可以检查目标路由是否需要记录浏览位置，然后根据判断结果调用`setCarrerTouScroll`：
```javascript
beforeRouteLeave (to, from, next) {
let that = this
if (to.meta.touFlag) { // 判断目标路由是否需要记录
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
this.$store.commit('setCarrerTouScroll', scrollTop)
} else {
this.$store.commit('setCarrerTouScroll', 0) // 如果不需要记录，重置滚动位置
}
next()
}
```
在路由配置中，为需要记录的页面添加一个`meta`属性，如`touFlag: true`：
```javascript
{
path: '/careerAddMainTeam',
name: 'CareerAddMainTeam',
component: CareerAddMainTeam,
meta: {
touFlag: true
}
}
```
当用户返回到记录过滚动位置的页面时，我们需要在数据加载完成后，利用Vue的`$nextTick`回调函数来恢复滚动位置。这是因为Vue的渲染是异步的，我们需要等待DOM更新后再进行滚动操作：
```javascript
this.$nextTick(() => {
this.scrollTop = this.$store.state.carrerTouScroll.height
document.documentElement.scrollTop = this.scrollTop
})
```
需要注意的是，确保在数据加载完成后再调用`$nextTick`，否则可能无法正确恢复滚动位置。
总结，实现Vue移动端记录页面浏览位置的方法主要包括以下步骤：
1. 在Vuex的state中定义一个用于存储滚动位置的变量。
2. 创建一个mutations方法来更新滚动位置。
3. 定义一个getter方法以便组件访问滚动位置。
4. 在需要记录的页面中监听`beforeRouteLeave`，并在符合条件时保存滚动位置。
5. 在页面加载完毕后，使用`$nextTick`恢复滚动位置。
以上就是利用Vue和Vuex在移动端记录页面浏览位置的具体实现，这种方法具有较好的可扩展性，适用于多个需要记录滚动位置的页面。如果你有其他高效的方法，欢迎分享交流，共同提高开发效率和用户体验。
