• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • Vue Router 和 组合式 API

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

    在 setup 中访问路由和当前路由

    因为我们在setup里面没有访问this,所以我们不能再直接访问this.$routerthis.$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中返回routerroute


    导航守卫

    虽然你仍然可以通过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 }
      },
    }
    

    上篇:扩展 RouterLink

    下篇:Vue Router API