Vue Router 和 组合式 API

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

setup 中访问路由和当前路由

因为我们在 setup 里面没有访问 this,所以我们不能直接访问 this.$routerthis.$route。作为替代,我们使用 useRouteruseRoute 函数:

javascript 复制代码
<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 对象,同时直接监听你期望改变的参数。

javascript 复制代码
<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,所以如果你只在模板中使用这些对象的话,是不需要 useRouteruseRoute 的。

导航守卫

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

javascript 复制代码
<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 组件或生成自定义链接:

javascript 复制代码
<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 组合式函数相同的属性。

相关推荐
知识分享小能手15 分钟前
Vue3 学习教程,从入门到精通,使用 VSCode 开发 Vue3 的详细指南(3)
前端·javascript·vue.js·学习·前端框架·vue·vue3
姑苏洛言32 分钟前
搭建一款结合传统黄历功能的日历小程序
前端·javascript·后端
hackchen1 小时前
Go与JS无缝协作:Goja引擎实战之错误处理最佳实践
开发语言·javascript·golang
你的人类朋友2 小时前
🤔什么时候用BFF架构?
前端·javascript·后端
知识分享小能手2 小时前
Bootstrap 5学习教程,从入门到精通,Bootstrap 5 表单验证语法知识点及案例代码(34)
前端·javascript·学习·typescript·bootstrap·html·css3
我命由我123453 小时前
前端开发问题:SyntaxError: “undefined“ is not valid JSON
开发语言·前端·javascript·vue.js·json·ecmascript·js
Jokerator3 小时前
深入解析JavaScript获取元素宽度的多种方式
javascript·css
海天胜景3 小时前
vue3 当前页面方法暴露
前端·javascript·vue.js
GISer_Jing4 小时前
前端面试常考题目详解
前端·javascript
中微子5 小时前
JavaScript 防抖与节流:从原理到实践的完整指南
前端·javascript