Vue3 的组合式 API 浅谈（三）

前端路由 Vue Router 在组合式 API 中的使用

引入 setup 的组合式 API，让 Vue3 语法发生较大变化。众所周知，Vue Router 在 vue2 的组件中可以直接使用 this.$route，this.$router 等方法。要想在组合式 API 这一环境下充分使用 Vue Router 的功能，我们需要使用一些新的函数来代替访问 this 和组件内的导航守卫。

在 setup 中访问路由和当前路由

因为在 setup 里面无法访问指向活跃组件的 this，也不能再直接访问this.$router 或 this.$route。

作为替代，想要在组件内正常使用 Vue Router 功能，需要使用 useRouter，useRoute 函数：

import { useRouter, useRoute } from 'vue-router'

export default {
  setup() {
    const router = useRouter()
    const route = useRoute()

    function pushQuery(query) {
      router.push({
        name: 'search',
        query: {
          ...route.query,
        },
      })
    }
  },
}

其中， route 对象是一个响应式对象，它的任何属性都可以被监听，但应该避免监听整个 route 对象，以免不必要的频繁触发影响性能。

在大多数情况下，应该直接监听你期望改变的参数。如：

 watch(
      () => route.params.id,
      async newId => {
        userData.value = await fetchUser(newId)
      }
    )

除了 setup 函数内部，在模板其他部分，仍然可以访问 $router 和 $route，所以不需要在 setup 中返回 router 或 route。

导航守卫

一种方法是可以通过 setup 函数来使用组件内的导航守卫。

另外， Vue Router 将更新和离开守卫作为组合式 API 函数公开：

import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'
import { ref } from 'vue'

export default {
  setup() {
    // 与 beforeRouteLeave 相同，无法访问 `this`
    onBeforeRouteLeave((to, from) => {
      const answer = window.confirm(
        'Do you really want to leave? you have unsaved changes!'
      )
      // 取消导航并停留在同一页面上
      if (!answer) return false
    })

    const userData = ref()

    // 与 beforeRouteUpdate 相同，无法访问 `this`
    onBeforeRouteUpdate(async (to, from) => {
      //仅当 id 更改时才获取用户，例如仅 query 或 hash 值已更改
      if (to.params.id !== from.params.id) {
        userData.value = await fetchUser(to.params.id)
      }
    })
  },
}