使用 this.$router.onReady() 确保 router 已经准备就绪示例

在 Vue.js 中，我们可以使用 this.$router.onReady() 方法来确保路由已经准备就绪，然后再进行操作。下面是一个示例：

export default {
  data() {
    return {
      isLoading: true,
      data: null
    }
  },
  mounted() {
    this.$router.onReady(() => {
      // 路由已经准备就绪
      this.loadData()
    })
  },
  methods: {
    async loadData() {
      try {
        const response = await fetch('/api/data')
        const data = await response.json()
        this.data = data
      } catch (error) {
        console.error(error)
      } finally {
        this.isLoading = false
      }
    }
  }
}

在上面的代码中，我们在 mounted 钩子函数中使用 this.$router.onReady() 方法来确保路由已经准备就绪，然后调用 loadData 方法来加载数据。如果路由没有准备就绪，loadData 方法就不会被调用。这样就可以避免因为路由没有准备就绪而导致的错误。