Маршрутизатор Vue

Как использовать Vue Router, одну из важнейших частей приложения Vue

Вступление

В веб-приложении JavaScript маршрутизатор - это часть, которая синхронизирует отображаемое в данный момент представление с содержимым адресной строки браузера.

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

Традиционно Интернет строится вокруг URL-адресов. Когда вы нажимаете определенный URL-адрес, отображается определенная страница.

С появлением приложений, которые запускаются внутри браузера и изменяют то, что видит пользователь, многие приложения прервали это взаимодействие, и вам пришлось вручную обновлять URL-адрес с помощью History API браузера.

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

Библиотека Vue Router - это лучший вариант для приложений Vue.js. Vue не требует использования этой библиотеки. Вы можете использовать любую общую библиотеку маршрутизации, которую хотите, или также создать свою собственную интеграцию с History API, но преимущество использования Vue Router заключается в том, что онофициальный.

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

Установка

Vue Router доступен черезnpmс пакетом с именемvue-router.

Если вы используете Vue через тег скрипта, вы можете включить Vue Router, используя

<script src="https://unpkg.com/vue-router"></script>

unpkg.com - очень удобный инструмент, который делает каждый пакет npm доступным в браузере по простой ссылке.

Если вы используетеVue CLI, установите его, используя

npm install vue-router

После установкиvue-routerи сделать его доступным либо с помощью тега скрипта, либо через Vue CLI, теперь вы можете импортировать его в свое приложение.

Вы импортируете его послеvue, и ты звонишьVue.use(VueRouter)кустановитьэто внутри приложения:

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

После того, как вы позвонитеVue.use()передавая объект маршрутизатора, в любом компоненте приложения у вас есть доступ к этим объектам:

  • this.$routerэто объект маршрутизатора
  • this.$routeэто текущий объект маршрута

Объект маршрутизатора

Объект маршрутизатора, доступ к которому осуществляется с помощьюthis.$routerиз любого компонента, когда Vue Router установлен в корневом компоненте Vue, предлагает множество приятных функций.

Мы можем заставить приложение переходить по новому маршруту, используя

  • this.$router.push()
  • this.$router.replace()
  • this.$router.go()

которые напоминаютpushState,replaceStateиgoметоды API истории.

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

Примеры использования:

this.$router.push('about') //named route, see later
this.$router.push({ path: 'about' })
this.$router.push({ path: 'post', query: { post_slug: 'hello-world' } }) //using query parameters (post?post_slug=hello-world)
this.$router.replace({ path: 'about' })

go()идет туда и обратно, принимая число, которое может быть положительным или отрицательным, чтобы вернуться в историю:

this.$router.go(-1) //go back 1 step
this.$router.go(1) //go forward 1 step

Определение маршрутов

Я используюОднофайловый компонент Vueв этом примере.

В шаблоне я используюnav tag that has 3 router-linkкомпоненты, которые имеют метку (Home / Login / About) и URL-адрес, назначенный черезtoатрибут.

Вrouter-viewкомпонент - это то, куда Vue Router поместит контент, соответствующий текущему URL-адресу.

<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link>
      <router-link to="/login">Login</router-link>
      <router-link to="/about">About</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

Аrouter-linkкомпонент рендеритaтег по умолчанию (вы можете изменить это). Каждый раз, когда маршрут изменяется, щелкнув ссылку или изменив URL-адрес,router-link-activeКласс добавляется к элементу, который ссылается на активный маршрут, что позволяет вам стилизовать его.

In the JavaScript part we first include and install the router, then we define 3 компоненты маршрута.

Передаем их на инициализациюrouterобъект, и мы передаем этот объект корневому экземпляру Vue.

Вот код:

<script>
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const Home = { template: ‘<div>Home</div>’ }

const Login = { template: ‘<div>Login</div>’ }

const About = { template: ‘<div>About</div>’ }

const router = new VueRouter({ routes: [ { path: ‘/’, component: Home }, { path: ‘/login’, component: Login }, { path: ‘/about’, component: About } ] })

new Vue({ router }).$mount(’#app’) </script>

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

new Vue({
  render: h => h(App)
}).$mount('#app')

При использовании Vue Router вы не проходитеrenderсвойство, но вместо этого вы используетеrouter.

Синтаксис, использованный в приведенном выше примере:

new Vue({
  router
}).$mount('#app')

это сокращение для

new Vue({
  router: router
}).$mount('#app')

Смотрите в примере, мы передаемroutesмассив вVueRouterконструктор. Каждый маршрут в этом массиве имеетpathиcomponentпараметры

Если вы пройдетеnameparam тоже у вас естьназванный маршрут.

Использование именованных маршрутов для передачи параметров в методы push и replace роутера

Помните, как мы раньше использовали объект Router для перехода к новому состоянию?

this.$router.push({ path: 'about' })

С помощью именованного маршрута мы можем передать параметры новому маршруту:

this.$router.push({ name: 'post', params: { post_slug: 'hello-world' } })

то же самое касаетсяreplace():

this.$router.replace({ name: 'post', params: { post_slug: 'hello-world' } })

Приложение отобразит компонент маршрута, соответствующий URL-адресу, переданному по ссылке.

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

Маршрутная охрана

Поскольку мы упоминалиохранники, давайте познакомим их.

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

Вы можете иметь глобальную охрану, добавив обратный вызов вbeforeEach()иafterEach()свойство роутера.

  • beforeEach()вызывается до подтверждения навигации
  • beforeResolve()вызывается, когда выполняется beforeEach и все компонентыbeforeRouterEnterиbeforeRouteUpdateвызывается охрана, но до подтверждения навигации. Последняя проверка, если хотите
  • afterEach()вызывается после подтверждения навигации

Что означает «навигация подтверждена»? Мы увидим это через секунду. А пока думайте об этом как о том, что «приложение может пойти по этому маршруту».

Использование:

this.$router.beforeEach((to, from, next) => {
  // ...
})
this.$router.afterEach((to, from) => {
  // ...
})

toиfromпредставляют собой объекты маршрута, к которым мы идем и от которых.beforeEachимеет дополнительный параметрnextчто, если мы позвоним сfalseв качестве параметра заблокирует навигацию и приведет к ее неподтверждению. Как и в промежуточном программном обеспечении Node, если вы знакомы, всегда следует вызывать next (), иначе выполнение зависнет.

Компоненты одиночного маршрута также имеют охранники:

  • beforeRouteEnter(from, to, next)вызывается до подтверждения текущего маршрута
  • beforeRouteUpdate(from, to, next)вызывается, когда маршрут изменяется, но управляющий им компонент остается прежним (с динамической маршрутизацией, см. далее)
  • beforeRouteLeave(from, to, next)вызывается, когда мы удаляемся отсюда

Мы упомянули навигацию. Чтобы определить, подтверждена ли навигация по маршруту, Vue Router выполняет некоторые проверки:

  • это зовётbeforeRouteLeaveзащита в текущем компоненте (ах)
  • он вызывает роутерbeforeEach()сторожить
  • он называетbeforeRouteUpdate()в любом компоненте, который необходимо повторно использовать, если таковой существует
  • он называетbeforeEnter()охранять объект маршрута (я не упоминал об этом, но вы можете посмотретьздесь)
  • он называетbeforeRouterEnter()в компоненте, в который мы должны войти
  • он вызывает роутерbeforeResolve()сторожить
  • если все было нормально, навигация подтверждена!
  • он вызывает роутерafterEach()сторожить

Вы можете использовать специальные охранники для маршрута (beforeRouteEnterиbeforeRouteUpdateв случае динамической маршрутизации) в качестве хуков жизненного цикла, чтобы вы могли начатьзапросы на выборку данныхНапример.

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

В приведенном выше примере показано другое представление на основе URL-адреса, обрабатывающее/,/loginи/aboutмаршруты.

Очень распространенная потребность - обрабатывать динамические маршруты, например, когда все сообщения находятся под/post/, каждый с именем слага:

  • /post/first
  • /post/another-post
  • /post/hello-world

Вы можете добиться этого, используя динамический сегмент.

Это были статические сегменты:

const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/login', component: Login },
    { path: '/about', component: About }
  ]
})

мы добавляем динамический сегмент для обработки сообщений в блогах:

const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/post/:post_slug', component: Post },
    { path: '/login', component: Login },
    { path: '/about', component: About }
  ]
})

Обратите внимание на:post_slugсинтаксис. Это означает, что вы можете использовать любую строку, и она будет сопоставленаpost_slugзаполнитель.

Вы не ограничены таким синтаксисом. Vue полагается наэта библиотекадля анализа динамических маршрутов, и вы можете сойти с ума сОбычные выражения.

Теперь внутри компонента маршрута Post мы можем ссылаться на маршрут, используя$route, и заголовок сообщения, использующий$route.params.post_slug:

const Post = {
  template: '<div>Post: {{ $route.params.post_slug }}</div>'
}

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

Вы можете иметь столько динамических сегментов, сколько хотите, в одном URL:

/post/:author/:post_slug

Помните, как раньше мы говорили о том, что происходит, когда пользователь переходит на новый маршрут?

В случае динамических маршрутов происходит немного другое.

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

Когда это происходит, Vue вызываетbeforeRouteUpdateсобытие жизненного цикла. Там вы можете выполнить любую нужную вам операцию:

const Post = {
  template: '<div>Post: {{ $route.params.post_slug }}</div>'
  beforeRouteUpdate(to, from, next) {
    console.log(`Updating slug from ${from} to ${to}`)
    next() //make sure you always call next()
  }
}

Использование реквизита

В примерах я использовал$route.params.*для доступа к данным маршрута. Компонент не должен быть так тесно связан с маршрутизатором, вместо этого мы можем использовать props:

const Post = {
  props: ['post_slug'],
  template: '<div>Post: {{ post_slug }}</div>'
}

const router = new VueRouter({ routes: [ { path: ‘/post/:post_slug’, component: Post, props: true } ] })

Обратите внимание наprops: trueпередается объекту маршрута, чтобы включить эту функцию.

Вложенные маршруты

Раньше я упоминал, что вы можете иметь столько динамических сегментов, сколько хотите, в одном и том же URL-адресе, например:

/post/:author/:post_slug

Итак, допустим, у нас есть компонент Author, который заботится о первом динамическом сегменте:

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script> import Vue from ‘vue’ import VueRouter from ‘vue-router’

Vue.use(VueRouter)

const Author = { template: ‘<div>Author: {{ $route.params.author}}</div>’ }

const router = new VueRouter({ routes: [ { path: ‘/post/:author’, component: Author } ] })

new Vue({ router }).$mount(’#app’) </script>

Мы можем вставить вторуюrouter-viewэкземпляр компонента внутри шаблона Author:

const Author  = {
  template: '<div>Author: {{ $route.params.author}}<router-view></router-view></div>'
}

добавляем компонент Post:

const Post = {
  template: '<div>Post: {{ $route.params.post_slug }}</div>'
}

а затем мы добавим внутренний динамический маршрут в конфигурацию VueRouter:

const router = new VueRouter({
  routes: [{
    path: '/post/:author',
    component: Author,
    children: [
      path: ':post_slug',
      component: Post
    ]
  }]
})

Скачать мою бесплатнуюСправочник по Vue


Больше руководств по vue: