Vue3中beforeRouteEnter用next方法没有返回$store

根据Vue3文档的介绍，`beforeRouteEnter`守卫中使用`next`方法可以接收一个回调函数，在组件实例化完成后执行。在回调函数中，可以访问到组件实例，并且可以将其作为参数传递给回调函数。

因此，如果想在`beforeRouteEnter`守卫中访问`$store`，可以将其作为参数传递给回调函数，然后在回调函数中访问`$store`。示例代码如下：

beforeRouteEnter(to, from, next) {
  next(vm => {
    console.log(vm.$store)
  })
}

在上面的代码中，`next`方法接收一个回调函数，该回调函数接收一个参数`vm`，表示组件实例。在回调函数中，可以通过`vm.$store`访问到`$store`对象。

另外，如果在组件中需要访问`$store`，也可以通过`inject`和`provide`实现。具体实现方式可以参考Vue3官方文档中的“Provide / Inject”一节。

相关问题

vue中使用beforeRouteEnter解决页面残留问题

在 Vue 中使用 `beforeRouteEnter` 可以在路由进入前执行一些操作，例如解决页面残留问题。

页面残留问题是指在路由跳转时，原来的页面的某些状态或数据仍然存在，导致新页面的数据和页面展示不正确。

使用 `beforeRouteEnter` 可以在路由跳转前清除掉残留状态和数据，确保新页面的数据和展示都是正确的。

具体实现方式如下：

1. 在需要解决页面残留问题的组件中定义 `beforeRouteEnter` 方法。

2. 在 `beforeRouteEnter` 方法中清除残留状态和数据。

beforeRouteEnter (to, from, next) {
  // 清除残留状态和数据
  this.$store.commit('clearState')
  this.$store.dispatch('clearData')
  next()
}

3. `beforeRouteEnter` 方法中的回调函数 `next()` 必须被调用，否则路由将被阻止。

以上就是在 Vue 中使用 `beforeRouteEnter` 解决页面残留问题的方法。

vue中怎样切换页面播放器依然播放？

在 Vue 中切换页面时，页面会重新渲染，此时如果页面上有播放器组件，播放器会重新创建，导致之前的播放状态丢失。为了解决这个问题，可以采用以下两种方式：

1. 使用路由钩子函数

可以在路由钩子函数中，记录当前播放器的状态，然后在切换页面时，暂停当前播放器的播放，并在切换到新页面后，恢复之前的播放状态。具体实现可以参考以下代码：

// 在路由钩子函数中记录播放器状态
beforeRouteLeave (to, from, next) {
  this.isPlaying = this.$refs.player.isPlaying()
  next()
},
beforeRouteEnter (to, from, next) {
  next(vm => {
    // 在组件创建完成后，恢复播放器状态
    if (vm.isPlaying) {
      vm.$refs.player.play()
    }
  })
}

2. 使用 Vuex 状态管理

可以使用 Vuex 状态管理来管理播放器状态，这样在切换页面时，播放器组件可以从 Vuex 中获取之前的播放状态。具体实现可以参考以下代码：

// 定义 Vuex 状态管理
const store = new Vuex.Store({
  state: {
    isPlaying: false
  },
  mutations: {
    setPlayingStatus(state, status) {
      state.isPlaying = status
    }
  }
})

// 在播放器组件中获取状态
computed: {
  isPlaying () {
    return this.$store.state.isPlaying
  }
}

// 在路由钩子函数中更新状态
beforeRouteLeave (to, from, next) {
  this.$store.commit('setPlayingStatus', this.$refs.player.isPlaying())
  next()
},
beforeRouteEnter (to, from, next) {
  next(vm => {
    if (vm.isPlaying) {
      vm.$refs.player.play()
    }
  })
}

以上两种方式都可以实现在切换页面时，保持播放器的播放状态。具体选用哪种方式，可以根据实际情况来决定。