vue-router: не удается получить правильный маршрут в App.vue?

vue-router

Проблема в этом

когда я получаю доступ к локальному проектуlocalhost:8080/#/home/111. Функция ловушки в компоненте Home может получить правильный путь, но в смонтированной функции ловушки App.vue черезthis.$route.pathПолученное значение равно/ ?

// router
const routes = [
  {
    path: '',
    alias: '/home/:id',
    name: 'Home',
    component: () => import('@/views/Home.vue')
    // component: Home 同步加载就不会有问题
  }
]

// App.vue中
{
    mounted () {
        console.log('mounted', this.$route.path) // mounted /
    }
}

жизненный цикл компонента

Прежде чем говорить об этой проблеме, необходимо понять, что есть разница между синхронным введением компонента Home и асинхронным введением.

Компонент синхронизации

  1. родительский компонент создан
  2. подкомпонент создан
  3. установлен дочерний компонент
  4. установлен родительский компонент

Асинхронные компоненты

  1. Родительский компонент создан, смонтирован
  2. Асинхронные дочерние компоненты созданы, смонтированы

vue-router

install

проходя черезvue.use(vueRouter)При регистрации плагина он будет называтьсяvueRouterвнизinstallметод и передать в Vue в качестве параметра,VurRouterИнициализация выполняется в самом начале.

Здесь делаются две вещи

  • Добавить в цепочку прототипов Vue$router,$routeАтрибуты. Передайте экземпляр vue позжеthis.$routerфактическиvueRouterэкземпляр маршрутизатора
  • Функция глобального миксина перед созданием. дам здесьvueRouteДобавить адаптивные свойства_route.

new vueRouter(route)

сделал это снова здесьдва кусочкаважные вещи:

  1. Создайтеmatcher.

будет настроен в соответствии сrouteгенерировать различные отображения, в том числеpathMap,nameMapтак же какpathList. незащищенныйmatchметод (решает проблему того, чему соответствует текущий путь),addRouteМетод (добавление маршрута динамически, по сути, это забытьpathMap,nameMapДобавлены новые сопоставления).

  1. СоздайтеHashHistoryилиHTML5History

СоздайтеHashHistoryилиHTML5HistoryСмонтируйте его под историей.

Текущий маршрут по умолчанию имеет значение START при создании HashHistory:{fullPath: "/",hash: "",matched: [],meta: {},name: null,params: {},path: "/",query: {}}.

этап перед созданием

Метод init vueRouter будет выполнен первым, и будет передан экземпляр vue. Когда он выполняется в первый раз, будет активно вызываться метод transitionTo, и будет зарегистрировано событие popstate/hashchange.

Метод match вызывается в transitionTo, и маршрут получается. Этот маршрут является параметром to в функции маршрутизации.

В настоящее время текущий vueRouter по-прежнему является СТАРТОМ по умолчанию., затем вызовите confirmTransition

confirmTransition

При подтверждении перехода в основном обрабатывается функция ловушки в маршруте:

const queue = [].concat(
  // in-component leave guards
  extractLeaveGuards(deactivated),
  // global before hooks
  this.router.beforeHooks,
  // in-component update hooks
  extractUpdateHooks(updated),
  // in-config enter guards
  activated.map(m => m.beforeEnter),
  // async components
  resolveAsyncComponents(activated)
)

Здесь очередь аналогична вызову next в экспрессе для выполнения следующей задачи очереди.Если это асинхронная функция, то она вернет Promise, а затем вызовет next после успешной загрузки.

Поскольку загрузка асинхронных компонентов является асинхронной (это кажется ерундой), когда вызовы экземпляра vue создаются и монтируются, следующий в vueRouter не выполняется, состояние vueRouter не переключается, а ток истории все еще НАЧАЛО. так в компонентеApp.vueизmountedполученный в функции ловушкиpathеще/.

Если вы собираетесь получить значение в компоненте, асинхронный компонент должен выйти, обновление маршрутизации завершено и можно получить правильный путь.

Динамическая загрузка маршрута завершена

Когда динамический маршрут загружен, будет вызван метод next(), который продолжит работу (включая хуки в компонентах, хуки разрешения и т. д.). Вы можете видеть, что модуль History не завершил переключение на данный момент:

图片

Шаг переключения истории не будет вызываться до тех пор, пока не завершится функция ловушки, такая как разрешение.updateRouteметод,this.currentRoute = route. После выполнения этого шага текущий маршрут заменяется новым маршрутом.

Суммировать

Когда маршрут сопоставляется с асинхронным компонентом, у компонента может быть множество причин (например,next('/login')перенаправлен или не может загрузиться по сетевым причинам), текущий в истории vueRouter изменит состояние только после успешной загрузки компонента.

Таким образом, смонтированный хук App.vue может получить только начальный маршрут. Если вам нужно получить значение динамической маршрутизации в App.vue, рекомендуется использовать наблюдатель для мониторинга и не выполнять операции инициализации, связанные с маршрутизацией, в функции ловушки.

Категории