Использование хуков в новой версии vue-router

Vue.js

предисловие

Хотя официально Vue 3 еще не выпущен, я люблю новые технологии и не могу сдержать свое сердце, и я начал пробовать использовать его в небольших проектах.

Согласно этому«Бета-версия Vue3 была выпущена рано утром, и она даже публично поддержала проект строительных лесов! 》Я построил проект скаффолдинга Vue 3. Построенный таким образом проект скаффолдинга — это не только новая версия vue, но и последние версии vue-router и vuex.

Сделайте для вас скриншот package.json:

Вы можете видеть, что и vue-router, и vuex начали эру 4.0!

Но на самом деле я не узнал о новом использовании vue-router 4.0, потому что не думаю, что он сильно изменится, как vue 3.0, который был в бета-версии.

А vue-router 4.0 все еще находится в стадии альфы, поэтому я думаю, что еще рано его изучать. Но это все! Это едва не обернулось трагедией.

Как использовать старую версию vue + vue-router

Если вы определяете динамический параметр в маршруте, он обычно записывается так:

{
    path: '/:id'
}

Тогда при использовании программной навигации это обычно пишется так:

this.$router.push('/123')

Этот параметр получается в компоненте:

this.$route.params.id

Как я думаю, используется новая версия vue + vue-router

Поскольку в Composition API vue 3.0 этого нет, я подумал о том, чтобы получить $route, получив экземпляр компонента:

import { defineComponent, getCurrentInstance } from 'vue'

export default defineComponent((props, context) => {
    const { ctx } = getCurrentInstance()
    
    console.log(ctx.$route)
})

Неожиданно распечатка не определена! Что с этим не так? Поэтому я снова напечатал ctx (ctx — текущий контекст компонента):

Те поля без $ - это переменные, которые я определил в компоненте. Те, что с $, встроены в Vue. После долгих поисков я обнаружил, что нет $ route, остался только один $ router. По оценкам, vue- Router 4.0 проложит текущий маршрут, информация будет передана в $router.

С угадаем, я открыл маршрутизатор $:

currentRoute!Если посмотреть на название, то должно быть именно оно! Так что я:

import { defineComponent, getCurrentInstance } from 'vue'

export default defineComponent((props, context) => {
    const { ctx } = getCurrentInstance()
    
    console.log(ctx.$router.currentRoute.value.params.id)
})

Действительно попал! Так счастлив!

Фактическая новая версия использования vue + vue-router

В следующем процессе я заменил оригинальный this.$router на ctx.$router и заменил оригинальный this.$route на ctx.$router.currentRoute.value.

Хотя в следующем прогрессе ошибок нет, программа всегда работала так, как я себе представлял.

Но после того, как проект был запакован, появился неожиданный баг: при прыжке по маршруту сообщалось об ошибке, что нет push на undefined.

Странно, программа не сообщила об ошибках на этапе разработки, так почему же ее нельзя запаковать? Опираясь на многолетний опыт разработки, я быстро нашел ошибку vue-router.

Это неправильно писать? Но когда я печатаю ctx, в нем явно есть $router, currentRoute в $router, значение в currentRoute, params в value и params, в которых я могу видеть переданные параметры.

Предполагается, что это может быть ошибка vue-router.Конечно, продукты на стадии альфа ненадежны.Я начал сожалеть об использовании новой версии проекта vue scaffolding.

хуки в vue-router

Но в это время меня внезапно осенило: разве vue 3 не был вдохновлен реактивными хуками для создания Composition API?

Тогда предполагается, что vue-router определенно будет вдохновлен react-router!

К счастью, я научился реагировать, и это действительно не подавляет! Подсчитано, что в нем должно быть useXxx, например:

import { useXxx } from 'vue-router'

Итак, что следует использовать? Само собой разумеется, что мы должны изо всех сил стараться поддерживать определенную связь с предыдущим API, я думаю, это должны быть useRoute и useRouter!

Чтобы проверить свою идею, я открыл node_modules и нашел исходный код vue-router:

Конечно же, в строках 2454 и 2455 я обнаружил, что он экспортирует useRoute и useRouter, так что вот оно:

import { defineComponent } from 'vue'
import { useRoute, useRouter } from 'vue-router'

export default defineComponent(_ => {
    const route = useRoute()
    const router = useRouter()

    console.log(route.params.id)
    router.push('/xxx/xxx')
})

Используя этот метод, можно не только успешно перейти на маршрут, но и получить параметры, переданные маршрутом.На этот раз я снова упаковал его и попробовал, и, конечно же, предыдущей ошибки нет.

Эпилог

Предполагается, что ведро семейства vue начнет эру национальных хуков в будущем.Глядя на исходный код, я обнаружил, что они написали несколько примеров в папке vue-router/playground, и я нашел несколько интересных вариантов использования в Это.

Если будет время, то внимательно изучу и напишу всем более развернутую статью.Конечно, если будет маленький партнер, жду не дождусь, могу сразу перейти на Vue-Router-next Адрес гитхаба:

GitHub.com/v UE JS/v UE-день…

Его примеры размещены в папке с площадкой, и я с нетерпением жду более подробной статьи после того, как вы изучите и поймете!

Замечательные статьи в прошлом

Категории