Vue Router 和 组合式 API
引入setup
和 Vue 的组合式 API,开辟了新的可能性,但要想充分发挥 Vue Router 的潜力,我们需要使用一些新的函数来代替访问this
和组件内导航守卫。
在 setup 中访问路由和当前路由
因为我们在setup
里面没有访问this
,所以我们不能再直接访问this.$router
或this.$route
。作为替代,我们使用useRouter函数:
import { useRouter, useRoute } from 'vue-router' export default { setup() { const router = useRouter() const route = useRoute() function pushWithQuery(query) { router.push ({ name: 'search', query: { ...route.query, }, }) } }, }
route对象是一个响应式对象,所以它的任何属性都可以被监听,但你应该避免监听整个route对象:
import { useRoute } from 'vue-router' export default { setup() { const route = useRoute() const userData = ref() // 当参数更改时获取用户信息 watch( () => route.params, async newParams => { userData.value = await fetchUser(newParams.id) } ) }, }
请注意,在模板中我们仍然可以访问$router
和$route
,所以不需要在setup
中返回router
或route
。
导航守卫
虽然你仍然可以通过setup
函数来使用组件内的导航守卫,但 Vue Router 将更新和离开守卫作为组合式 API 函数公开:
import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router' 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() // 与 beforeRouteLeave 相同,无法访问 `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>
渲染的组件中,它们不必像组件内守卫那样直接用在路由组件上。
useLink
Vue Router 将 RouterLink 的内部行为作为一个组合式 API 函数公开。它提供了与v-slot
API 相同的访问属性:
import { RouterLink, useLink } from 'vue-router' export default { name: 'AppLink', props: { // 如果使用 TypeScript,请添加 @ts-ignore ...RouterLink.props, inactiveClass: String, }, setup(props) { const { route, href, isActive, isExactActive, navigate } = useLink(props) const isExternalLink = computed( () => typeof props.to === 'string' && props.to.startsWith('http') ) return { isExternalLink, href, navigate, isActive } }, }