Vue Router 和 组合式 API

本文主要是介绍Vue Router 和 组合式 API，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

Vue 的组合式 API 的引入开辟了新的可能性，但要想充分发挥 Vue Router 的潜力，我们需要使用一些新的函数来代替访问 this 和组件内导航守卫。

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

因为我们在 setup 里面没有访问 this，所以我们不能直接访问 this.$router 或 this.$route。作为替代，我们使用 useRouter 和 useRoute 函数：

<script setup>
import { useRouter, useRoute } from 'vue-router'const router = useRouter()
const route = useRoute()function pushWithQuery(query) {router.push({name: 'search',query: {...route.query,...query,},})
}
</script>

route 对象是一个响应式对象。在多数情况下，你应该避免监听整个 route 对象，同时直接监听你期望改变的参数。

<script setup>
import { useRoute } from 'vue-router'
import { ref, watch } from 'vue'const route = useRoute()
const userData = ref()// 当参数更改时获取用户信息
watch(() => route.params.id,async newId => {userData.value = await fetchUser(newId)}
)
</script>

请注意，在模板中我们仍然可以访问 $router 和 $route，所以如果你只在模板中使用这些对象的话，是不需要 useRouter 或 useRoute 的。

导航守卫​

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

<script setup>
import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'
import { ref } from 'vue'// 与 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)}
})
</script>

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

useLink​

Vue Router 将 RouterLink 的内部行为作为一个组合式函数 (composable) 公开。它接收一个类似 RouterLink 所有 prop 的响应式对象，并暴露底层属性来构建你自己的 RouterLink 组件或生成自定义链接：

<script setup>
import { RouterLink, useLink } from 'vue-router'
import { computed } from 'vue'const props = defineProps({// 如果使用 TypeScript，请添加 @ts-ignore...RouterLink.props,inactiveClass: String,
}）const {// 解析出来的路由对象route,// 用在链接里的 hrefhref,// 布尔类型的 ref 标识链接是否匹配当前路由isActive,// 布尔类型的 ref 标识链接是否严格匹配当前路由isExactActive,// 导航至该链接的函数navigate
} = useLink(props)const isExternalLink = computed(() => typeof props.to === 'string' && props.to.startsWith('http')
)
</script>

注意在 RouterLink 的 v-slot 中可以访问与 useLink 组合式函数相同的属性。

这篇关于Vue Router 和 组合式 API的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---