Краткое изложение базовых знаний о Vue-Router [серия vue]

vue-router
Краткое изложение базовых знаний о Vue-Router [серия vue]

Vue-Router

1. Знай маршрут

1. Что такое маршрутизация (понимание)

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

Маршрутизация предназначена для отображения различного контента или страниц в соответствии с разными ur-адресами;

Маршрутизация — относительно широкое и абстрактное понятие, суть маршрутизации — соответствие

2. Этап внутренней маршрутизации

  • В первые дни разработки веб-сайтов вся HTML-страница отображалась сервером.
    • Сервер будет напрямую отображать соответствующую HTML-страницу и отображать ответ клиенту.
  • Внутренняя маршрутизация
    • Когда браузер переключается между разными URL-адресами в адресной строке, он каждый раз отправляет запрос на фоновый сервер, и сервер отвечает на запрос.
    • Сращивание html-файлов в фоновом режиме и передача их на внешний дисплей с возвратом на разные страницы
    • Это означает, что браузер обновит страницу, если скорость сети низкая, экран может быть полностью белым, и тогда будет новый контент. Еще одна серьезная проблема внутренней маршрутизации заключается в том, что внешняя и внутренняя части не разделены.
  • Недостатки внутренней маршрутизации
    • Модули всей страницы написаны и поддерживаются бэкэнд-персоналом, что непросто поддерживать.
    • Обычно код HTML и соответствующий код внутренней логики смешиваются вместе, что очень плохо писать и поддерживать.

3. Внешний этап маршрутизации

  • Стадия разделения front-end и back-end:
    • С появлением Ajax появился режим разработки, который разделяет переднюю и заднюю части.
    • Серверная часть предоставляет только API для возврата данных, передняя часть получает данные через Ajax и отображает данные на странице через JS.
    • Самым большим преимуществом этого является то, что обязанности фронтенда и бэкэнда ясны, бэкэнд фокусируется на данных, а фронтенд фокусируется на взаимодействии и визуализации.
    • А после появления мобильного терминала (ISO/Android) бэкенду не нужно делать никакой обработки, и можно использовать прежний набор API.
  • Что такое СПА
    • SPA — это аббревиатура одностраничного веб-приложения, переводимая как одностраничное веб-приложение.
    • Проще говоря, SPA — это веб-проект только с одной html-страницей.После загрузки страницы SPA не будет перезагружать или переходить страницу из-за действий пользователя.
    • Вместо этого используйте JS для динамического преобразования содержимого html, чтобы имитировать переход между несколькими представлениями.
  • Одностраничное расширенное приложение (SPA)
    • По сути, главная особенность SPA заключается в том, чтобы добавить уровень фронтальной маршрутизации на основе разделения фронтенда и бэкенда.
    • То есть внешний интерфейс для поддержки набора правил маршрутизации.
  • В чем суть внешней маршрутизации?
    • Измените URL, но страница не обновляется в целом



2. Правила внешней маршрутизации

1. Хэш URL

  • Хэш URL-адреса — это якорь (#), который существенно изменяет атрибут href в window.location.
  • Мы можем прямое заданиеlocation.hashИзмените href, но страница не обновляется

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

  • Интерфейс истории является новым в HTML5, он имеет пять режимов для изменения URL-адреса без обновления страницы.
  • history.pushState()
    • Похоже на: толкни и вытолкни, первый пришел последним
  • history.replaceState()
    • Заменить URL, без резерва
  • history.back()
    • Вернуться к предыдущему URL
  • history.forward()
    • Перейти к последнему URL
  • history.go(Number)
    • Number: перейти вперед или назад к указанному URL



3. Основы Vue-маршрутизатора

1. Познакомьтесь с vue-router

  • vue-router — официальный плагин маршрутизации для Vue.js, который глубоко унаследован от vue.js и используется для создания одностраничных приложений (официальная документация)
  • vue-router основан на маршрутизации и компонентах
    • Маршрутизация используется для установки путей доступа и сопоставления путей и компонентов.
    • В одностраничном приложении vue-router смена пути страницы — это переключатель компонента

2. Установите и используйте vue-router

  • Шаг 1: установка npm

    • npm install vue-router --save

  • Шаг 2: Используйте его в проекте модуля (поскольку это плагин, поэтому передайтеVue.use()установить функцию маршрутизации)

    • ①импортобъект маршрута и вызовVue.use(VueRouter)Установить маршрутизацию

    • ② Создатьэкземпляр маршрутизации,и пройти по маршрутуКонфигурация сопоставления

    • ③ В файле основной записи: импортируйте созданный экземпляр маршрутизации, экземпляр VueМонтирование экземпляра маршрутизации

    • 1. Настройте Vue-Router (на фото) 
      image-20200605221255068

  • Шаг 3: Используйтеvue-router

    • Создание компонентов маршрутизации

    • Настроить сопоставление маршрутов (отношения между компонентами и сопоставлением путей)

    • использовать маршрутизацию<router-link to="/path">а также<router-view>

    • 2. Используйте Vue-Router (на фото) 
      image-20200605222206637

3. Подробное объяснение компонентов маршрутизации

  • <router-link>: метка — это компонент со встроенным глобальным параметром, он будет отображаться как<a>Этикетка

    • to="path": это свойство будет отображаться какhrefАтрибуты
    • to="path": значение свойства будет отображаться как #hashадрес
      • path: Путь пути, настроенный в маршруте

  • <router-view>: Метка будет динамически отображать соответствующий компонент в соответствии с текущим путем.

  • Когда маршрут переключается, переключатель<router-view>Установленные компоненты, остальное содержимое не изменится



4. Другие дополнения для настройки маршрутизации

1. Путь маршрута по умолчанию

Сценарий: зайдите на главную страницу веб-сайта, надеюсь<router-view>Визуализировать содержимое главной страницы

  • добавить в правила маршрутизацииПеренаправить на путь по умолчанию 
const routes = [
    {
      // 配置默认路径
      path: '/',
      // 重定向到/home路径
      redirect: '/home'
    }
]

2. Режим истории пути

Сценарий: URL-адрес, отображаемый страницей, а не диапазон хеш-значений#/home, хотите отобразить обычный URL: /home

  • существуетVueRouterпримерoptionустановить вmodeдляhistoryРежим
// 创建VueRouter对象
const router = new VueRouter({
  routes,// 路由规则
  mode: 'history'// URL显示的模式
})

3. Добавлены атрибуты router-link и конфигурации маршрутизации

  • <route-link>другие свойства
    • tag="": вкладка может указать<router-link>какой элемент отображает компонент
    • replace: Нет записи истории отката, перемотка вперед не действует
    • active-class="": когда<router-link>Когда соответствующий путь будет успешно сопоставлен, он автоматически добавитrouter-link-activeизclass, настраиватьactive-classИмя по умолчанию можно изменить
<!-- tag: 指定<router-link>组件渲染成什么元素 -->
<!-- replace: 没有history记录,前后键没有用 -->
<!-- active-class: 修改匹配成功默认添加的class类名 -->
<router-link to="/home" tag="button" replace active-class="active">首页</router-link>
<router-link to="/about" tag="button" replace active-class="active">关于页面</router-link>
  • Настройте свойства маршрута:linkActiveClass
    • Функция: когда<router-link>Когда соответствующий путь успешно совпадает, установите имя класса, добавленное по умолчанию.
const router = new VueRouter({
  routes,// 路由的映射规则
  mode: 'history',// 模式
  linkActiveClass: 'active'// 设置默认匹配添加地类
})

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

  • Сценарий: не используется<router-link>Глобальный компонент для перехода к URL-адресу
    • this.$router.push('path'): Для реализации URL-адреса перехода существует резервная запись истории.
    • this.$router.replace('path'): для достижения URL-адреса перехода нет записи истории отката.
  methods: {
    home() {
      // 没有使用<router-link>全局组件,来跳转URL,如何实现
      // this.$router.push('/home') // 有回退记录
      this.$router.replace('/home') // 没有回退记录
    },
    about() {
      // this.$router.push('/about')
      this.$router.replace('/about')
    }
  }

5. Динамическое сопоставление маршрутов

  • В некоторых случаях нам нужно динамически установить путь, например, вход на страницу пользователя, и мы хотим отобразить следующий путь

    • /пользователь/ааа или /пользователь/ббб
    • В дополнение к предыдущему /user также следует идентификатор пользователя.
    • Эта взаимосвязь соответствия между путем и компонентом называется динамической маршрутизацией (также способом маршрутизации данных).

  • Шаги динамического сопоставления маршрутов

    • 1. Настройте параметры динамической маршрутизации

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

    • 2. Передайте параметры в компонент APP.vue

    • 3. Передайте компонент маршрутизации$route.paramsПолучить параметры маршрута

  • значок
    image-20200606224656315



5. Маршрутизация ленивой загрузки

1. Понимание ленивой загрузки маршрутизации

  • официальное объяснение
    • При упаковке и сборке приложения пакет JavaScript становится очень большим, что влияет на загрузку страницы.
    • Если мы сможем разделите компоненты, соответствующие различным маршрутам в разные блоки кода, а затем загружать соответствующие компоненты при доступе к маршруту, он будет более эффективным
  • Зачем использовать ленивую загрузку маршрутизации?
    • Наши упакованные файлы обычно помещаются в файл js, который должен быть очень большим.
    • Если мы запросим этот файл из сети за один раз, это может занять много времени, и даже в браузере появится короткий белый экран.
    • Как этого избежать:Ленивая загрузка с маршрутамипросто хорошо
  • Что делает ленивая загрузка маршрута?
    • Основная функция ленивой загрузки маршрута — упаковать компоненты, соответствующие маршруту, в блоки кода js один за другим.
    • Только при доступе к этому маршруту загружается соответствующий компонент

2. Используйте ленивую загрузку маршрутизации

  • Метод 1: объединить асинхронные компоненты Vue и анализ кода Webpack

    • const Home = resolve => { require.ensure(['../components/Home.vue'], () => { resolve(require('../components/Home.vue')) })};

  • Способ 2: запись AMD

    • const About = resolve => require(['../components/About.vue'], resolve);

  • способ третий: В ES6 у нас есть более простой способ организовать разделение кода асинхронных компонентов Vue и Webpack.

    • const Home = () => import('../components/Home.vue')

  • Рендеринг после упаковки




6. Вложение маршрута

1. Распознайте вложенную маршрутизацию

  • На домашней странице мы получаем доступ к некоторому контенту через /home/news и /home/message.
  • Сопоставление другого компонента по одному пути, доступ к этим двум путям также приведет к раздельному отображению двух компонентов.
  • Отношения между путями и компонентами следующие:

2. Реализация вложенной маршрутизации

  • 1. Создайте компоненты
  • 2. В правиле сопоставления маршрутов настройте вложенные маршруты:children: [{},{}]
  • 3. На странице, куда нужно вложить компонент, используйте router-link и router-view

3. Путь по умолчанию для вложенных маршрутов

  • Вложенные маршруты также могут устанавливать пути по умолчанию.
  const routes = [
  {
    path: '/home',
    component: Home,
    // 配置嵌套路由  
    children: [
    {
      // 嵌套路由的默认路径
      path: '',
      redirect: 'news'
    },
    {
      path: 'news',
      component: News
    },
    {
      path: 'message',
      component: Message
    }]
  }]



7. запрос для получения параметров

1. получение запроса

  • 1. Создайте новый компонент Profile.vue
  • 2. Настройте сопоставление маршрутов
  • 3. Добавьте переход в APP.vue 
 <!-- 1. APP.vue 参数的传递 -->
<router-link :to="{path: '/profile',query: {
  name: 'wuyifan',
  age: 18,
  height: 1.88
}}">档案</router-link>

<!-- 2.  Profile.vue 获取query参数 -->
 <h3>{{$route.query}}</h3>
значок 
image-20200608181530494

2. Как передать параметры

  • Есть два основных типа передаваемых параметров: params и query
  • params
    • Настроить маршрутизациюpath: /user/:userId
    • Способ передачи: передаваемое значение вставляется после пути
    • Получить переданные параметры:$route.params.userId
  • query
    • Настроить маршрутизациюpath: /profile(Нормальная конфигурация)
    • Способ доставки:{path: '/profile', query: {name: 'yifan'} }
    • Получить переданные параметры:$route.query.name
  • когда вы не используете<router-link>прыгать к
this.$router.push({
        path: '/profile',
        query: {
          name: 'yifan',
          age: 18,
          height: 1.88
        }
      })

3. Разница между маршрутизатором и маршрутом

  • $routerа также$routeразница
    • $routerЭто экземпляр VueRouter, который используется для операций навигации, связанных с путем.
    • routeявляется компонентным объектом текущего сопоставления пути (текущий активный объект маршрутизации), который можно получитьpath, queryПараметры и т.д.



VIII. Навигация охраны ⚔

1. Знайте навигационную стражу

Официальное объяснение:vue-routerПредоставленные навигационные охранники в основном используются для навигации по охранникам путем прыжка или отмены.

  • навигационная охрана
    • Навигационные охранники - некоторые из маршрутов в процессе прыжков.функция ловушки, роутинг джамп это большой процесс, этот большой процесс это маленький процесс до и после, в каждом процессе есть функция, эта функция позволяет управлять некоторыми другими вещами, это защита навигации
    • vue-routerпри условииbeforeEachа такжеafterEachловушки, они будут запускаться до и после изменения маршрута

глобальная функция ловушки

  • Вы можете напрямую написать логику кода в файле конфигурации маршрутизации router.js, и вы можете сделать некоторый глобальный перехват маршрутизации
// 全局前置守卫
router.beforeEach((to, from, next) => {
   // to: Route:即将要进入的目标路由对象
 // from: Route:当前导航正要离开的路由  
    // 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是confirmed (确认的)
 next();
});
// 全局后置守卫
router.afterEach((to, from) => {
    console.log(to.path);
});

2. Использование навигационной защиты

  • Рассмотрим требование: в приложении SPA, как изменить заголовок страницы
    • Первое, о чем вы должны подумать, это то, что в файле .vue компонента, соответствующем каждому маршруту, черезmountedФункция жизненного цикла, изменить заголовок
    • Но когда страниц много, этот метод непросто поддерживать (поскольку аналогичный код нужно выполнять на нескольких страницах).
    • Есть ли лучший способ?Просто используйте навигационную защиту
  • Используйте средства навигации в файлах конфигурации маршрутизации для изменения заголовков страниц.
// 在钩子当中定义一些标题, 可以利用meta来定义
const routes = [
    {
        path: '/user/:userId',
        component: User,
        meta: {
            title: '用户'
        }
    },
    {
        path: '/profile',
        component: Profile,
        meta: {
            title: '档案'
        }
    }
]
// ------导航守卫(guard)-----------
router.beforeEach((to, from, next) => {
  // 从from跳转到to
  // from: 将要进行跳转的当前$route对象 (跳转前的一些操作)
  // to: 跳转后$route对象 (跳转后的一些操作)
  // next(): 调用该方法后, 才能进入下一个钩子
  document.title = to.matched[0].meta.title;
  next()
})

3. Глобальный почтовый хук

  • Вы также можете зарегистрировать глобальные почтовые хуки, однако, в отличие от охранников, эти хуки не будут приниматьnextФункция также не меняет саму навигацию.
router.afterEach((to, from) => {
  // ...
})

4. Эксклюзивная функция перехвата маршрутизации

  • Вы можете сделать перехват прыжка на одном маршруте. Просто напишите код в файле дозирования
const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

5. Функция хука в компоненте

  • Более детальный перехват маршрута, только для перехвата, входящего в определенный компонент
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`
  }
}

Сценарии использования функции хука

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



9. Сохранять компоненты

1. Кэширование страницы

  • В одностраничном приложении (SPA), созданном Vue, обычно используется модуль маршрутизации.vue-router
  • vue-routerСостояние переключаемого компонента не сохраняется, при его push или replcae старый компонент будет уничтожен, новый компонент будет создан и повторится полный жизненный цикл
  • Но иногда у нас есть некоторые требования, такие как возврат на страницу списка, на которую щелкнул пользователь перед переходом, но при возврате нет предыдущей записи.Для такого требования к кэшированию страницы мы можем использоватьkeep-aliveкомпоненты для решения

2.поддерживающий компонент

  • keep-aliveэто встроенный компонент Vue, который может сделатьВключенные компоненты сохраняют состояние, илиизбегать повторного рендеринга
    • два очень важныхАтрибуты:
    • inclue: значение представляет собой строку или регулярное выражение, кэшируются только соответствующие компоненты.
    • exclue: значение представляет собой строку или регулярное выражение, любые совпадающие компоненты не будут кэшироваться.
    • Будьте осторожны: строка соответствует свойству имени в компоненте Vue, если оно не настроеноnameСвойство Keep-alive не вступит в силу
  • использоватьkeep-alive: существуетkeep-aliveКомпоненты просмотра в пакете кэшируются
<!-- Profile,User是 Vue 组件中的name属性(千万注意,如果没有配置将不会生效) -->
<keep-alive exclude="Profile,User">
  <router-view></router-view>
</keep-alive>
  • Кроме того: две функции жизненного цикла, активированные и деактивированные, должны быть доступны после использования компонента поддержания активности, в противном случае он не существует.
Категории