前往小程序,Get更优阅读体验!
立即前往
发布
社区首页 >专栏 >【Vue Router】013-Vue Router 与组合 API

【Vue Router】013-Vue Router 与组合 API

作者头像
訾博ZiBo
发布2025-01-06 14:24:13
发布2025-01-06 14:24:13
800
举报
文章被收录于专栏:全栈开发工程师

1.13 Vue Router 与组合 API

1.13.1 概述

实际上,我们在上面的代码里面已经尽量使用组合 API 了,在这里进行一个总结。

1.13.2 在 setup() 函数中访问 Router 和当前路由

因为我们在 setup 里面没有访问 this,所以我们不能再直接访问 this.router 或 this.route。作为替代,我们使用 useRouter() 函数和 userRoute() 函数,可以分别得到路由器对象和当前路由对象。代码示例如下:

代码语言:javascript
复制
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 对象:

代码语言:javascript
复制
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。

1.13.3 导航守卫

虽然你仍然可以通过 setup 函数来使用组件内的导航守卫,但 Vue Router 将更新和离开守卫作为 组合式 API 函数公开:

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

1.13.4 useLink*

Vue Router 将 RouterLink 的内部行为作为一个组合式 API 函数公开。它提供了与 v-slot API同的访问属性:

代码语言:javascript
复制
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 }
  },
}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2025-01-06,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1.13 Vue Router 与组合 API
    • 1.13.1 概述
      • 1.13.2 在 setup() 函数中访问 Router 和当前路由
        • 1.13.3 导航守卫
          • 1.13.4 useLink*
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档