在组合式API中使用Vue Router

前面所讲解的 Vue Router 结合组件的使用都是在配置式 API 中，特别是在编程式导航中，可以通过 this.$router 或者 this.$route 等方法来操作 Vue Router，例如页面跳转(push)或者获取页面地址参数（query 或者 params）等。在组合式 API 的 setup 方法中，也可以使用 Vue Router，主要通过 useRouter、useRoute 实现，如示例代码7-15-1所示。

示例代码7-15-1　useRouter方法和useRoute方法的使用

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

export default {
    setup() {
        const router = useRouter() // 相当于 this.$router
        const route = useRoute()  // 相当于 this.$route
        console.log(route.query)
        const goDetail = () => {
            router.push({
                name: 'search',
                query: {

                }
            })
        }
    },
}

上面的代码中，需要注意的是，如果需要获取地址栏的参数，在使用 useRoute 时，由于是响应式数据，可以采用以下方法来获取最新的参数信息，代码如下：

// 1. 通过computed方法获取最新的实时数据
let id = computed(() => route.query.id);
// 2. 通过watch方法获取最新的实时数据
let id = ref('')
watch(
    () => route.query,
    (obj) => {
        id.value = obj.id
    }
)
// 3. 通过watchEffect来收集最新的实时数据
let id = ref('')
watchEffect(()=>{
    id.value = router.query.id
})

注意，如果直接通过 route.query 获取参数，得到的数据可能不是最新的，如果想要获取最新的数据，则需要采用上面代码中的方法。另外，在模板中我们仍然可以访问 $router 和 $route，所以不需要在 setup 中返回 router 或 route。

在 setup 方法中，也可以使用导航守卫，如示例代码7-15-2所示。

示例代码7-15-2　setup方法中导航守卫的使用

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)
            }
        })
    },
}

组合式 API 守卫也可以用在任何由 <router-view> 渲染的组件中，它们不必像组件内守卫那样直接用在路由组件上。