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

柔情只为你懂 2023-10-01 11:35 11阅读 0赞

## 1.13 Vue Router 与组合 API ##

### 1.13.1 概述 ###

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

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

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

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`。

### 1.13.3 导航守卫 ###

> 虽然你仍然可以通过 `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>` 渲染的组件中，它们不必像组件内守卫那样直接用在路由组件上。

### 1.13.4 useLink\* ###

> Vue Router 将 RouterLink 的内部行为作为一个组合式 API 函数公开。它提供了与 [`v-slot` 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 }
      },
    }

[v-slot_ API]: https://next.router.vuejs.org/zh/api/#router-link-s-v-slot