Фронтальная маршрутизация

1. хэш-режим

вместе с ajax Популярный асинхронный запрос данных выполняется без обновления браузера. Более продвинутая версия асинхронного интерактивного взаимодействия: SPA —— Одностраничное приложение. Одностраничные приложения обеспечивают не только взаимодействие со страницами без обновления, но и переходы по страницам без обновления. Для реализации одностраничных приложений существует Фронтальная. маршрутизация。 Аналогично маршрутизации на стороне сервера, Фронтальная Маршрутизация на самом деле очень проста в реализации, но отличается от дасоответствовать. url Путь, анализ и последующая динамическая визуализация области. html содержание. Но с этим есть проблема, т. url При каждом изменении страница будет обновляться. Тогда меняется способ решения проблем. url В этом случае убедитесь, что страница не обновляется. существовать 2014 Много лет назад все прошли hash Чтобы реализовать маршрутизацию, URL hash Это что-то вроде:

http://www.xxx.com/#/login

Этот #. Последующие изменения значения хеша не заставят браузер отправить запрос на сервер. Если браузер не отправит запрос, он не обновит страницу. Кроме того, каждый раз, когда изменяется значение хеш-функции, будет инициироваться событие hashchange. Благодаря этому событию мы можем узнать, какие изменения произошли в значении хеш-функции. Затем мы можем прослушать hashchange, чтобы обновить часть содержимого страницы:

function matchAndUpdate () {
/* todo соответствовать hash Делать dom Операция обновления*/
}
window.addEventListener('hashchange', matchAndUpdate)

2. режим истории

14 лет спустя, потому что HTML5 Стандартный выпуск. еще два API,pushState и replaceState, через эти два API может измениться url адрес, и запрос не будет отправлен. Еще есть попстейт событие. С их помощью вы можете достичь Фронтальной по-другому. маршрутизация, но принципы все те же hash Реализуйте то же самое. Использовал HTML5 Реализация одностраничной маршрутизации url Не будет больше # и станет красивее. Но поскольку нет # Нет. Поэтому, когда пользователь обновляет страницу, браузер все равно отправит запрос на сервер. Чтобы избежать этой ситуации, эта реализация требует поддержки сервера и все маршруты должны быть перенаправлены на корневую страницу.

function matchAndUpdate () {
/* todo соответствоватьпуть Делать dom операция обновления */
}
window.addEventListener('popstate', matchAndUpdate)

Источник：https://zhuanlan.zhihu.com/p/37730038 

3. Разница

1. В отображении URL-адреса режим хэша имеет «#», а режим истории — нет.
2. При обновлении страницы хэш Схемы могут быть загружены обычным способом в hash значение соответствует странице, а history Если он не обработан, он вернется 404, обычно серверной части необходимо настроить все страницы для перенаправления на маршрут домашней страницы.
3. Совместимость, хэш Может поддерживать браузеры более ранних версий. IE。

Vue Router

Официальная документация：https://router.vuejs.org/zh/api/、https://router.vuejs.org/、https://nicen.cn/vue.html（Vueпримечания）

Описание: Обычная маршрутизация, динамическая маршрутизация, вложенная маршрутизация, именованная маршрутизация, именованные представления.

1. Используется в Vue2.x.

import Router from 'vue-router'  /*Представляем Vuerouter*/
Vue.use(Router) /*Установить плагин*/

/* Базовая конфигурация маршрутизации  */
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

/* создавать router экземпляр, а затем передать `routes` Конфигурация */
const router = new VueRouter({
  routes: routes
})

/*создавать Подключаем корневой экземпляр через router Параметры конфигурации вводятся в маршруты, чтобы все приложение имело функции маршрутизации. */
const app = new Vue({
  router
}).$mount('#app')

2. Используется в Vue3.x.

import {createRouter,createWebHashHistory} from  'vue-router'
import {createApp} from  'vue'
/* создавать router экземпляр, а затем передать `routes` Конфигурация */
const router = createRouter({
  history: createWebHashHistory(),
  routes: routes
})

/* создать и смонтировать корневой экземпляр */
const app = createApp({})
/* убеждаться _use_ Экземпляр маршрутизации позволяет всему приложению поддерживать маршрутизацию. */
app.use(router)
app.mount('#app')

базовые знания

Vue+Vue RouterВ основном используется для одностраничных приложений.создавать；vue-router.jsРазоблачу одинVueRouterКонструктор,Проходя внутрьправило маршрутизации Конфигурацияобъектсоздаватьмаршрутизатор（Router）;

//Vue2.x
const router = new VueRouter({
     routes: routes
})
//Vue3.x
const router = createRouter({
  history: createWebHashHistory(),
  routes: routes
})

router-link,Используется для отображения указанных маршрутовизкомпоненты。 router-viewИспользуется для отображения маршрутовизкомпоненты。

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- использовать router-link Компонент для навигации. -->
    <!-- Проходя внутрь `to` Атрибут указывает ссылку. -->
    <!-- <router-link> По умолчанию будет отображается как `<a>` Этикетка -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- выход маршрутизации -->
  <!-- Маршрутизация соответствует компоненту, который будет отображаться здесь. -->
  <router-view></router-view>
</div>

1. Компоненты при маршрутизации

1. .компонентыможно разделить на общиекомпоненты（пройти напрямую Этикеткаиспользовать）имаршрутизациякомпоненты（проходитьмаршрутизацияпоказывать）,Оба типа компонентов обычно можно хранить отдельно.,Легко управлять。（components/pages）。маршрутизациякомпоненты Чем обычныйкомпоненты Будет большемаршрут (текущая информация о маршрутизации, связанная с компонентом)router（указать на определениеизвесьмаршрутизатор）свойство；
2. Внедряя маршрутизатор, мы можем пройти через любой существующий компонент. this.Маршрутизатор Получите доступ к маршрутизатору, вы также можете использовать его.route доступ к текущему маршруту
3. маршрутизацияпроцесссерединаскрытыйизкомпонентыбудетразрушать（keep-aliveВнизизкомпоненты Волябудетбронировать）；

2. Вложенная маршрутизация (многоуровневая маршрутизация)

router-viewЭтикетка Внутри,показыватьизкомпонентытакже может включатьrouter-viewЭтикеткаииспользоватьмаршрутизацияrouter-link；такой жеизтакжедасуществоватьVueRouterизмаршрутизациярегулированиеносерединануждатьсяиспользовать children В конфигурации с многоуровневой маршрутизацией атрибут to маршрутизатора-link должен использовать полный путь к компоненту.

const router = new VueRouter({
  routes: [
    {
      path: '/user',
      component: User,
      children: [
         { 
            path: 'children', 
            component: UserHome 
         }
        /*Другие подмаршруты*/
      ]
    }
  ]
})

Если маршрут не соответствует указанному компоненту, компонент, указанный {path:''}, будет отображаться по умолчанию.

3. Назовите маршруты, маршруты перенаправления, псевдонимы.

Помимо пути, вы можете указать имя для любого маршрута.

const routes = [
  {
    path: '/user/:username',
    name: 'user',
    component: User
  }
]

router.push({ name: 'user', params: { username: 'erina' } })

Вы также можете обеспечить перенаправление для перенаправления (перенаправление означает, что когда пользователь обращается к /home, URL-адрес будет заменен на /, а затем сопоставлен с маршрутом /.), при написании перенаправления вы можете опустить настройку компонента, поскольку она никогда не имеет прямого доступа, поэтому нет никаких компонентов для рендеринга.

//Можно вызвать функцию обратного вызова,Вы можете назвать маршрут по имени,Также дапат,Вы также можете маршрутизировать объект,также Можеткдапредставлятьpathизнить（Нетиспользовать/представлятьотносительный адрес）
const routes = [{ path: '/home', redirect: { name: 'homepage' } }]

Вы также можете определить доступ к псевдониму через псевдоним (псевдоним / как /home означает, что когда пользователь обращается к /home, URL-адрес по-прежнему будет /home, но он будет сопоставляться при обращении пользователя к /.), что отличается от перенаправления. URL-адрес не будет заменен (фактический доступ к /home — /);

const routes = [{ path: '/', component: Homepage, alias: '/home' }]

4. Назовите вид

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

<router-view class="view left-sidebar" name="LeftSidebar"></router-view>
<router-view class="view main-content"></router-view>
<router-view class="view right-sidebar" name="RightSidebar"></router-view>

Представление отображается с использованием компонента, поэтому для нескольких представлений требуется несколько компонентов для одного и того же маршрута. Обязательно правильно используйте конфигурацию компонентов (с помощью s):

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: '/',
      components: {
        default: Home,
        // LeftSidebar: LeftSidebar из аббревиатуры
        LeftSidebar,
        // Они связаны с `<router-view>` начальствоиз `name` свойствосоответствовать        RightSidebar,
      },
    },
  ],
})

5. Навигационная стража

материал：https://zhuanlan.zhihu.com/p/54112006

«Навигация» указывает на то, что маршрут меняется. Охранники навигации — это некоторые функции-перехваты в процессе перехода по маршруту. Этот большой процесс разделен на небольшие процессы, такие как до, в середине и после перехода. В каждом процессе есть функция. позволяет делать и другие вещи, это навигационный страж.

Навигационные ограждения делятся на три типа: глобальные, эксклюзивные для одного маршрута и внутрикомпонентные.

a.Глобальная навигационная защита

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

глобальный префикссторожить（beforeEach）：любая навигациякурокчас,Эту функцию-крючок будут использовать все.

const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
   ....
})

to: Route предстоящая цель маршрутизацияобъект、from: Route Маршрут, который собирается покинуть текущая навигация объект next: Function  resolve Введите следующую функцию перехвата. Эффект от исполнения зависит от next Параметры вызова метода. next(): Перейдите к следующему крючку в конвейере. Если все перехватчики были выполнены, статус навигации будет confirmed (подтвержденный). next(false): Прервать текущую навигацию. Если браузер URL измененный (возможно, руководство пользователя или кнопка «Назад» в браузере), затем URL Адрес будет сброшен на from Адрес, соответствующий маршруту. next('/') или next({ path: '/' }): Перейти на другой адрес. Текущая навигация прерывается и начинается новая навигация. ты можешь спросить next Передайте любой объект местоположения и разрешите такие настройки, как replace: true、name: 'home' варианты и любые router-link из to prop или router.push Средний вариант. next(error): (2.4.0+) Если передано next изпараметрдаа Error Например, навигация будет прекращена, и ошибка будет передана в router.onError() Зарегистрировался через обратный звонок.

Глобальный анализсторожить（beforeResolve）,ibeforeEachразницасуществовать навигация подтверждена,При этом сохраняются все компоненты в пределах сторожить после анализа компонента асинхронной маршрутизации.,анализироватьсторожить Просто будьвызов,параметртакжедаto,from,nextтри。Прямо сейчассуществовать beforeEach и beforeRouteEnter в компоненте После, вызывается перед afterEach.

Глобальный почтовый крючок（afterEach）：иbeforeEachНапротив,После того, как он дасуществовать маршрут, прыжок завершен курок.,Параметры включают в себя,from не имеет следующего (параметры будут введены отдельно),Он возникает после существованияbeforeEachиbeforeResolve и beforeRouteEnter (сторожить внутри компонента, после разговора).

б. Эксклюзивная охрана маршрута.

[Исключительный маршрут из] да относится к одному маршруту. При настройке конфигурации вы также можете установить функцию из перехватчика.,Его расположениеда Вниз В приведенном выше примереиз Расположение,Другими словами, все компоненты, подобные Foo, имеют функции-перехватчики, подобные существующему. В настоящее время у него есть только одна функция перехвата перед Enter.

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        /*...*/
      }
    }
  ]
})

иbeforeEach точно такой же,Если установлены оба параметра, функция «существующийbeforeEach» будет выполнена немедленно.,Параметры до, от, следующий

c. Защита внутри компонентов.

Следующие средства защиты навигации по маршруту могут быть определены непосредственно в компоненте маршрутизации:

const Foo = {
  template: `...`,
  beforeRouteEnter(to, from, next) {
    /* существование отображает компонент, и соответствующий маршрут confirm впередвызов*/    /*Нет! способный! Получить экземпляр компонента `this`*/
    /*Потому что при выполнении сторожить экземпляр компонента не был создан*/
  },
  beforeRouteUpdate(to, from, next) {
    /* существуют Текущий маршрут меняется, но дапри повторном использовании компонента*/
    /*Например, для пути с динамическими параметрами /foo/:id,существовать /foo/1 и /foo/2 При переходе между из, */
    /*Потому что он отобразит то же самое Foo Компонент, поэтому экземпляры компонента используются повторно. И в этом случае этот хук будет вызовом. */
    /*Может получить доступ к экземплярам компонентов `this`*/
  },
  beforeRouteLeave(to, from, next) {
    /*При выходе из компонента и соответствующего вызова маршрута*/
    /* Иметь доступ к экземплярам компонентов `this`*/
  }
}

6. Полный процесс анализа навигации по маршруту.

1. Навигация срабатывает.
2. существоватьдеактивироватьизкомпонентывнутривызов beforeRouteLeave сторожить.
3. вызовобщая ситуацияиз beforeEach сторожить.
4. существоватьповторное использованиеизкомпонентывнутривызов beforeRouteUpdate сторожить (2.2+)。
5. существоватьмаршрутизация Конфигурациявнутривызов beforeEnter。
6. Устраните компоненты асинхронной маршрутизации.
7. существование активируется из компонента вызова beforeRouteEnter。
8. вызовобщая ситуацияиз beforeResolve сторожить (2.5+)。
9. Навигация подтверждена.
10. вызовобщая ситуацияиз afterEach крюк.
11. Запустить обновление DOM.
12. вызов beforeRouteEnter сторожитьпромежуточный проход next из функции обратного вызова экземпляр компонента creategoodiz будет передан в качестве параметра функции обратного вызова.

7. Защита внутри компонентов

beforeRouteEnterмаршрутизация Входить Довызов,Параметры включают в себя,from,next。Крючоксуществоватьобщая ситуациясторожитьbeforeEachи ЭксклюзивныйсторожитьbeforeEnterпосле,global beforeResolve и global afterEach перед вызовом,Следует отметить, что доступ к компоненту экземпляра в рамках сторожить невозможен.,То есть это не определено,То есть, он существует до создания жизненного цикла курок. существуют В этой функции-хука,Вы можете передать обратный вызов рядом, чтобы получить доступ к экземпляру компонента. Обратный вызов выполняется, когда подтверждается навигация по существованию, а экземпляр компонента используется в качестве параметра метода обратного вызова. Вы можете запросить сервер для получения данных в существовании. При успешном получении и возможности входа в маршрут передаются вызовы next и существования. обратный вызов. vmдоступкомпоненты Пример Сделать заданиеждатьдействовать,（nextсредняя функцияизвызовсуществоватьmountedпосле：дляубеждаться Может быть правкомпоненты Примеризполный доступ）。

 beforeRouteEnter (to, from, next) {
  /*Экземпляр компонента здесь пока недоступен, это === undefined*/
  next( vm => {
    /*проходить `vm` Доступ к экземпляру компонента*/
  })
}

8. Эффект анимации переключения маршрута.

router-view поддерживает использование эффектов перехода;

//vue3.x
<router-view v-slot="{ Component }">
  <transition name="fade">
    <component :is="Component" />
  </transition>
</router-view>
//vue2.x
<transition>
  <router-view></router-view>
</transition>

Сопоставить все маршруты, сопоставить 404 запроса

1.vue2.x

vue2.xВнизизrouterможет быть напрямуюиспользовать*подстановочный знаксоответствоватьвсемаршрутизация,Если ни один элемент маршрутизации не соответствует, он будет обработан * маршрутизацией.

2.vue3.x

const routes = [
  // согласовать все и положить это в существование `$route.params.pathMatch` Вниз
  { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound }
]

pathMatch представляет собой имя параметра,Параметры внутри () требуют соответствияизрегулярных,(.*) представляет соответствие любому параметру,Это эквивалентно произвольной маршрутизации.

Маршрутизация метаинформации

При определении маршрутов вы можете использовать Конфигурацию meta Поле (элемент,как и другие идеи,Используется для описания этой записи маршрутизации и некоторой информации)

мы звоним routes Конфигурация в каждом объекте маршрута для Запись маршрута. Записи маршрутизации могут быть вложенными. Поэтому, если соответствие маршрута выполнено успешно, у него может быть несколько записей маршрутизации, соответствующих всем записям маршрутизации. route объект (кромесуществоватьнавигациясторожитьсерединаизмаршрутизацияобъект) из route.matched множество. Поэтому нам нужно пересечь 

https://router.vuejs.org/zh/guide/advanced/meta.html

Объект конфигурации маршрута

Vue-router API：https://router.vuejs.org/zh/api/

1. путь, запишите путь. должно быть / начало,Если только записьдаеще одна записьизребенок Записывать.Параметры могут быть определены：/users/:id соответствовать /users/1 а также /users/posva。
2. redirect,Если маршрут да прямой, соответствует,Так куда перенаправить. Перенаправление происходит до начала существования всей навигации,И перейдите к новому из целевого местоположения, курок нового из. Также возможно создать функцию, которая получает адрес целевого маршрута и возвращает местоположение, куда мы должны перенаправить. соответствовать перенаправлению напрямую
3. дети, маршрутизация из вложенной маршрутизации
4. псевдоним, псевдоним маршрутизации. Позволяет определять дополнительные маршруты, например реплики записей. Это позволяет сокращать маршрутизацию как Этот вид /users/:id и /u/:id。 Все alias и pathЗначения должны иметь один и тот же параметр。
5. name — уникальное имя записи маршрутизации.
6. beforeEnter,существовать Введите конкретное для этой записиизсторожить До。Обратите внимание, что если запись имеетПеренаправлениесвойство,но beforeEnter неверный.
7. props, позволяющий передавать параметры как props прошел мимо router-view рендерингизкомпоненты。когда переданоЗапись с несколькими просмотрамичас,должнодаодин скомпонентыесть тот же ключизобъект,илидаодин применяется к каждомукомпонентыизЛогическое значение。
8. meta,существуют добавление пользовательских данных к записям.

Ленивая загрузка маршрутов и асинхронных компонентов

Vue Router поддерживает динамический импорт «из коробки».,Ленивая загрузка：использоватьприезжатьизчас Загрузить только позже。（проходитьVueизасинхронныйкомпонентыиWebpackиз Динамически внедряется для достижения）

const UserDetails = () => import('./views/UserDetails')
component:UserDetails 
//или
component:()=>import("/pages/rand.vue")

маршрутизациясередина Нетнуждаться要использоватьасинхронныйкомпоненты,Поскольку сама маршрутизация поддерживает динамическое введение,компоненты То же, что обычныйкомпоненты Такой жеизопределение Прямо сейчас Может；

let router = VueRouter.createRouter({
    history: VueRouter.createWebHashHistory(),
    routes : [
        {
            path: "/", component: () => import("./pages/index.vue")
        }
    ]
});

Программная навигация

Официальная документация：https://v3.router.vuejs.org/zh/guide/essentials/navigation.html#%E6%93%8D%E4%BD%9C-history

Помимо использования <router-link> создавать a Теги для определения навигационных ссылок, мы также можем использовать router Методы экземпляра реализуются путем написания кода. (См. мини-программу метода навигации)

существовать Vue Внутри экземпляра вы можете передать router Доступ к экземпляру маршрутизации. Поэтому вы можете позвонить this.router.push。

• router.push(location, onComplete?, onAbort?),Перейти на новый адрес,Создать новую историю.
• router.replace(location, onComplete?, onAbort?), а затем router.push Очень похоже, с той лишь разницей, что да, не будет history Добавьте новую запись, и имя метода будет такое же, как и у нее. —— Заменить ток из history Записывать.
• router.go(n),этот методизпараметрдаацелое число,иметь в видудасуществовать history Запишите количество шагов вперед и назад.

параметры маршрутизации

Текущая страница параметров объекта маршрутизации (маршрута), связанных с API:

1. $router.query, из URL-адреса из поисковой части, извлекает из декодированного параметра запроса из словаря.
2. $router.params, извлеките декодированный словарь параметров из пути
3. $router.hash, декодированный URL из hash часть. всегда с #начало. если URL Никто хэш — пустая строка.

1. Логический режим

параметрмаршрутизация:назадиз Параметры могутиспользоватьтольконовыражение,Например/:пользователь?,представлять Дополнительные параметры,к Внизпредставлять Может重复изпараметр

const routes = [
  // /:chapters ->  соответствовать /one, /one/two, /one/two/three, ждать
  { path: '/:chapters+' },
  // /:chapters -> соответствовать /, /one, /one/two, /one/two/three, ждать
  { path: '/:chapters*' },
]

Это предоставит массив параметров,а не строка,исуществоватьиспользоватьжизньимямаршрутизациячастакженуждаться要你传递один数组。

Дополнительные параметры

https://router.vuejs.org/zh/guide/essentials/route-matching-syntax.html#%E5%8F%AF%E9%80%89%E5%8F%82%E6%95%B0

Официальная документация：https://router.vuejs.org/zh/guide/essentials/passing-props.html

# Идентификатор будет передан в качестве компонента маршрутизации изprops.
const routes = [
  {
    path: '/user/:id',
    props: true 
 }
]

2.Объектный режим

const routes = [
  {
    path: '/promotion/from-newsletter',
    component: Promotion,
    props: { newsletterPopup: false }
  }
]

объект Волякакмаршрутизациякомпонентыизprops（имяизначение соответствует）входящий。

3. Функциональный режим

const routes = [
  {
    path: '/search',
    component: SearchUser,
    props: route => ({ query: route.query.q })
  }
]

Сам рут из реквизита связан.

Динамическое добавление и удаление маршрутов

Динамическая маршрутизация в основном реализуется с помощью двух функций. маршрутизатор.addRoute() и router.removeRoute(). Они только регистрируют новый маршрут, то есть, если вновь добавленный маршрут связан с текущим местоположением, вам нужно использовать router.push() или router.replace() Для отображения нового маршрута требуется ручная навигация.

Связанные документы

https://router.vuejs.org/zh/guide/advanced/dynamic-routing.html#%E6%B7%BB%E5%8A%A0%E8%B7%AF%E7%94%B1

1.addRoute

Добавьте в маршрут новую запись маршрута. Если маршрут имеет name,И уже есть маршрут с таким названием из,Сначала будет удален предыдущий маршрут.

2.removeRoute

Удалить существующий маршрут по имени.

Vue-router4.x

существуютsetup Получить текущий маршрут и объект маршрутизатора

• 1.useRoute,返回当впередмаршрутизацияадрес。Эквивалентносуществоватьшаблонсерединаиспользовать $route。долженсуществовать setup() серединавызов。
• 2.useRouter, возврат router Пример。Эквивалентносуществоватьшаблонсерединаиспользовать $router。долженсуществовать setup() серединавызов。
• 3.маршрутизациясередина Нетнуждаться要использоватьVue3.xсерединаизасинхронныйкомпоненты,Поскольку сама маршрутизация поддерживает динамическое введение,компоненты То же, что обычныйкомпоненты Такой жеизопределение Прямо сейчас Может；
• 4. Выполнение UseRouter должно быть размещено внутри метода установки, вверху и в других местах.,Нет Могу поставитьсуществовать Внизлапшаsetupизфункциявнутрилапшаосуществлять,В противном случае область действия изменится. useRouter выполнение не определено.
• 5. существование vue-router начинает брать на себя маршрутизацию, когда веб-страница открывается и запускает jsиз, а затем переходит в режим соответствия на основе текущего доступа по ссылке переписыватьсяизмаршрутизация（нравиться：Связьedit,соответствовать пути для редактирования маршрута и загрузки),Если соответствия нет, то 404. (Соответствовать также изменит URL-адрес маршрутизатора.,нравитьсяhistoryмодель Внизизbaseurl）。

VueRouter с Vue2.x на 3.x

• новый Router становится createRouter, Vue Router больше не класс, а набор функций.
• новыйиз history Конфигурация заменяет mode： "history"=> createWebHistory() "hash"=>createWebHashHistory() "abstract"=> createMemoryHistory()
• base Конфигурация принимается как createWebHistory (другой history То же самое)из Передаётся первый параметр

Сбор сетевых данных

иногда,После входа на определенный маршрут,Необходимо получить данные с сервера. Например,существуют при рендеринге пользовательской информации,Вам необходимо получить пользовательские данные с сервера. Мы можем сделать это двумя способами:

1. Получается после завершения навигации.

Сначала завершите навигацию,Ранназадсуществоватьловить Вниз Приходитьизкомпоненты生жизнь周期钩ребеноксередина Получить данные。существоватьпериод сбора данныхпоказывать“нагрузкасередина”и тому подобноеизинструктировать。

2. Получите до завершения навигации.

До завершения навигации,существующий маршрут в изсторожить для получения данных,существования Выполнять навигацию после успешного получения данных.

Сбой навигации

1. Ситуация

• Пользователь уже находится на странице, на которую пытается перейти.
• одиннавигациясторожитьпроходитьвызов return false Эта навигация была прервана
• Пока текущий не доделан, появится новый.
• Навигация сторожить, вернув новое местоположение,Перенаправлениеприезжатьв другом месте (Например, возврат '/login')
• Навигационный сторож выдал ошибку

Маршрут сторожить может возвращать объект Promise,Метод навигации по вызову функции вернет объект,С помощью этого объекта вы можете судить, успешна ли навигация или нет.

Навигация асинхронная

После завершения навигации будет вызван следующий метод:

await router.push('/my-profile')
this.isMenuOpen = false

Когда навигационный курок,Глобальный префикс сторожить соответствует порядку создания вызова. сторожитьда выполнение асинхронного анализа,этотчаснавигациясуществоватьвсесторожить resolve Жду до конца.

Краткое изложение практических вопросов

1. В одностраничном приложении пользователь нажимает кнопку «Обновить».

historyмодель Вниз,Изменения маршрутизации изменят текущий URL-адрес.,нормальныйизсреда браузера Вниз,Когда пользователь обновляется,Запрос ссылки «из» по-прежнему является первым запросом ссылки «из». Но реализовать Enterprise WeChat из браузера,Затем да использует измененную ссылку для обновления. Измените модель на Hashmodel и сохраните ссылку прежней.,404 можно избежать;

2. Запуск процесса после использования Vue-router

use Vue-router   —>   Введите App.vue    —>   Загрузить инициализацию изUrl (через текущий доступ изURLсоответствовать = создательroutingобъектизизизбазовый адрес + путь маршрутизации)  —>  Путь маршрутизации успешно найден  —>  Загрузить соответствующие компоненты маршрутизации  —>  рендерингприезжатьApp.vueизrouter-viewЭтикетка  —>  Загрузка завершена

3. Используйте объект vue-router в обычных js-файлах.

Непосредственно представить создателя объекта из маршрутизатора,Ранназад Сразу Можеткинормальныйизrouterобъект Такой жеиспользовать Понятно。setupсерединануждаться要использоватьuseRouterметод,И начать надо с дасуществовать блок кода из.

4. Подмаршрут «/»

“/”изребенокмаршрутизация На самом дележдать То же, что и первый уровеньмаршрутизация Такой жеиз Эффект,Можеткпройти напрямую Доступ после сопоставления «/route».

5. Используется с поддержкой активности

//vue2.x
 <keep-alive>
    <router-view></router-view>
 </keep-alive>

//Vue3.x
<router-view v-slot="{ Component }">
    <keep-alive>
          <component :is="Component" />
    </keep-alive>
</router-view>

ссылка:

https://www.jianshu.com/p/b324bdd73556

Если сообщается об ошибке: родительский Компонент.ctx.deactivate не является функцией, убедитесь, что ключ представляет собой уникальный идентификатор, который может решить проблему:

<router-view v-slot="{ Component }">
   <keep-alive>
     <component :is="Component" :key="$route.name">
   </keep-alive>
</router-view>  

6. Разница между ленивой и неленивой загрузкой

Нетиспользовать Ленивая загрузка,Компонент существующего объекта маршрутизации будет загружен при его инициализации.,нагрузкавсепредставлятьизполагаться、документждатьждать,Иногда компоненты могут ссылаться на некоторые внешние файлы js.,Этидокументсуществоватькомпонентывместе с Маршрут запустится после загрузки. Например h5plusизplus объект,Исходная настройка — прослушивание события загрузки в App.vue перед его инициализацией для вызова глобального объекта.,Но да потому что маршрут не ленивый загружается,вызов внешнего js внутри компонента запускается раньше времени и вызывает плюсобъект,Вызывает фатальную ошибку в js.

Ленивая загрузка потребляет очень мало ресурсов.,существоватьиспользоватьпроцесссередина Основные чувства Нетприезжатьразница,Местокмаршрутизация Как можно большеиспользовать Ленивая загрузка。

7. Запишите один раз, что vue-router не отображает компонент.

Функция глобальной маршрутизации сторожитьвызовиз,Нет вызоваследующий,Вызывает зависание всей логики,Нетрендерингкомпоненты。

8. Приоритет сопоставления маршрутов

проверено,Сначала определитеизмаршрутизация Приоритет ниже, чемназадопределениеизмаршрутизация。тестовый примернравиться Вниз：

{
    path:"/",
    имя:"Войти",
    component:()=>import("../pages/login")
},
{
    path:"/",
    имя:"Дом",
    component:()=>import("../pages/index")
}

9. Родительские маршруты не будут автоматически перенаправлять дочерние маршруты.

Доступ к родительскому маршруту по умолчанию не приведет к доступу к первому дочернему маршруту. Перед доступом необходимо указать дочерний маршрут.

10. вид маршрутизатора из v-слот

<router-view> разоблаченный один v-slot API, в основном используется <transition> и <keep-alive> компоненты Приходитьобернуть тебяизмаршрутизациякомпоненты。

<router-view v-slot="{ Component, route }">
  <transition :name="route.meta.transition || 'fade'" mode="out-in">
    <keep-alive>
      <suspense>
        <template #default>
          <component
            :is="Component"
            :key="route.meta.usePathKey ? route.path : undefined"
          />
        </template>
        <template #fallback> Loading... </template>
      </suspense>
    </keep-alive>
  </transition>
</router-view>

• Component: быть переданным из VNodes да prop。
• route: Разберите стандартизированный адрес маршрутизации.

11. Измените путь дополнительной маршрутизации на корневой путь.

ребенокмаршрутизацияизpathМожеткда «/child» — это путь первого уровня. При загрузке дочерних маршрутов также загружаются все родительские компоненты маршрутизации.

12. Правила определения маршрутизации

• Названия маршрутов и пути на одном уровне не могут быть одинаковыми.,Тот же из имеет волю соответствовать меньше;
• Названия разных уровней не могут быть одинаковыми, а пути — одинаковыми.,Тот же из имеет волю соответствовать меньше;
• Путь подмаршрутизации может быть относительным или абсолютным путем;
• redirectПеренаправлениеизпуть Можеткдаабсолютныйпутьтакже Можеткдаотносительнопуть；
• Родительский маршрут не обязательно должен быть привязан к компоненту; дочерний маршрут будет отображаться непосредственно в верхнем компоненте;

13. Маршрутизатор — вид подкомпонентов

ребеноккомпоненты Внутри Писатьизrouter-viewМожетккак父маршрутизациякомпонентыизобласть рендеринга。также СразудагипотезаAдамаршрутизацияaиздоступизкомпоненты,В A есть подкомпонент, который содержит компонент представления маршрутизатора.,aмаршрутизация Внизлапшакромеребенокмаршрутизация；доступaизребенокмаршрутизациячас,会рендерингприезжатьAизребеноккомпонентыизrouter-view

14. Как запретить рендеринг родительского компонента?

vue-router,Если вы перенаправляете непосредственно на компонент-потомок,Промежуточному родительскому компоненту не обязательно указывать компонент; он также может указать компонент, который содержит только компонент представления маршрутизатора.,Приходить Пусть отецкомпоненты Нетрендеринг额外изкомпоненты；

component: {render: () => h(RouterView)},

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

15. Страница не обновляется при изменении параметров параметров маршрутизации.

Параметр маршрутизации присутствует, изменяется при переключении из,Как страница из маршрута такая же, как из,Отличается только последний параметр,Не будет курок страницы с запросом данных. Решение: добавьте ключ на страницу просмотра маршрутизатора.,Сделайте fullPath уникальным значением для каждой страницы.,Когда ключевые значения разные,Страница обновится