Vue Router и API композиций

Посмотреть бесплатный видеоурок на Vue School

Введение setup и API композиций Vue, открывает новые возможности, но чтобы полностью использовать Vue Router, нам нужно будет использовать несколько новых функций для замены доступа к this и страже навигации в компонентах.

Доступ к роутеру и текущему маршруту внутри `setup`

Поскольку у нас нет доступа к this внутри setup, мы больше не можем напрямую получить доступ к this.$router или this.$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'
import { ref, watch } from 'vue'

export default {
  setup() {
    const route = useRoute()
    const userData = ref()

    // fetch the user information when params change
    watch(
      () => route.params.id,
      async newId => {
        userData.value = await fetchUser(newId)
      }
    )
  },
}

Обратите внимание, что у нас всё ещё есть доступ к $router и $route в шаблонах, поэтому нет необходимости возвращать router или route внутри setup.

Хотя вы по-прежнему можете использовать стражи навигации в компонентах с помощью функции setup, Vue Router предоставляет функции стражей обновления и выхода в API композиций:

import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'
import { ref } from 'vue'

export default {
  setup() {
    // same as beforeRouteLeave option with no access to `this`
    onBeforeRouteLeave((to, from) => {
      const answer = window.confirm(
        'Do you really want to leave? you have unsaved changes!'
      )
      // cancel the navigation and stay on the same page
      if (!answer) return false
    })

    const userData = ref()

    // same as beforeRouteUpdate option with no access to `this`
    onBeforeRouteUpdate(async (to, from) => {
      // only fetch the user if the id changed as maybe only the query or the hash changed
      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'
import { computed } from 'vue'

export default {
  name: 'AppLink',

  props: {
    // add @ts-ignore if using TypeScript
    ...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 }
  },
}

Получение данных

Переходы

Vue Router и API композиций

Доступ к роутеру и текущему маршруту внутри setup

Стражи навигации

useLink

Доступ к роутеру и текущему маршруту внутри `setup`

`useLink`