《Vue Router实战教程》16.组合式 API

欢迎观看《Vue Router 实战(第4版)》视频课程

    1. 组合式 API

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

      1. 在 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 的。

      1. 导航守卫

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> 渲染的组件中,它们不必像组件内守卫那样直接用在路由组件上。

      1. 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,

  // 用在链接里的 href

  href,

  // 布尔类型的 ref 标识链接是否匹配当前路由

  isActive,

  // 布尔类型的 ref 标识链接是否严格匹配当前路由

  isExactActive,

  // 导航至该链接的函数

  navigate

} = useLink(props)

const isExternalLink = computed(

  () => typeof props.to === 'string' && props.to.startsWith('http')

)

</script>

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值