Первый взгляд на Vue Router в Vue3

Управление маршрутами - важная функция для большинства одностраничных приложений. С новой версией Vue Router на стадии альфа-тестирования мы уже можем начать проверять, как она работает в следующей версии Vue.

Многие изменения в Vue3 немного изменят способ доступа к плагинам и библиотекам, в том числе Vue Router.

Мы рассмотрим возможность использования альфа-версии Vue Router в сочетании с текущим выпуском Vue3 Alpha.

К концу этой статьи вы должны знать, как добавить Vue Router в свои проекты Vue3, и иметь хороший небольшой пример!

Настройка вещей

Итак, для начала мы будем использовать предварительный просмотр Vue3 Webpack, опубликованный Эваном Ю.

Давайте клонируем репо с git clone https://github.com/vuejs/vue-next-webpack-preview.git

Затем, чтобы добавить альфа-канал vue-router в наш проект, мы хотим изменить наш файл package.json.

Внутри наших зависимостей мы хотим добавить следующую версию vue-router

"dependencies": {
    "vue": "^3.0.0-alpha.10",
    "vue-router": "4.0.0-alpha.4"
}

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

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

Внутри нашей src/ folder мы собираемся добавить три файла.

маршрутизатор / index.js
просмотров / Home.vue
просмотров / Contact.vue

Наш файл маршрутизатора, как вы уже догадались, будет содержать наш маршрутизатор, а наши представления Home / Contact будут выводить только одно слово, чтобы мы могли видеть, что происходит.

Создание наших маршрутов

Хорошо, все готово, давайте начнем использовать Vue Router!

Проще говоря, основное отличие Vue3-версии vue router заключается в том, что нам нужно импортировать новые методы, чтобы наш код заработал. Наиболее важные из них createRouter и createWebHistory.

Внутри нашего файла router / index.js давайте импортируем эти два метода и два наших представления из предыдущих.

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import Contact from '../views/Contact.vue'

Затем мы хотим создать объект routerHistory, используя подобный метод createWebHistory.

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import Contact from '../views/Contact.vue'

const routerHistory = createWebHistory()

Раньше мы могли просто сказать mode: history, чтобы переключиться из режима хеширования в режим истории, но теперь мы делаем это с помощью history: createWebHistory()

Затем мы можем создать наш маршрутизатор, используя createRouter. Он принимает объект, и мы хотим передать нашу переменную routerHistory, а также массив наших двух маршрутов.

const router = createRouter({
  history: routerHistory,
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/contact',
      component: Contact
    }
  ]
})

Наконец, давайте просто сделаем наш файл экспортируемым нашим маршрутизатором.

export default router

Как видите, на высоком уровне он все еще очень похож на Vue2. Но со всеми этими изменениями, позволяющими улучшить поддержку и оптимизацию Typescript, хорошо познакомиться с новыми методами.

Заставляем наше приложение использовать vue router

Теперь, когда наш файл Vue Router действительно настроен, мы можем добавить его в наш проект. Раньше мы могли просто импортировать его и сказать Vue.use(router), но в Vue3 все по-другому.

На самом деле это отличное введение в то, как мы создаем и монтируем наше приложение Vue.

Внутри нашего файла main.js вы увидите, что мы используем метод createApp из Vue для фактического создания нашего проекта. В проекте по умолчанию он объединяет методы createApp и mount.

Мы хотим разделить эти методы вот так.

const app = createApp(App)

app.mount('#app')

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

import router from './router'

const app = createApp(App)

app.use(router)

app.mount('#app')

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

<template>
  <div id='root'>
    <img src='./logo.png' />
    <div id='nav'>
      <router-link to='/'> Home</router-link>
      <router-link to='/contact'>Contact </router-link>
    </div>
    <router-view />
  </div>
</template>

Итак, теперь, если мы щелкнем мышью, мы увидим, что действительно можем перемещаться между нашими двумя страницами!

НО если мы попробуем перейти прямо на наш /contact маршрут, это не сработает! Получаем какую-то ошибку.

К счастью, это действительно быстрое исправление веб-пакета.

Внутри нашего файла webpack.config.js мы хотим, чтобы наш devServer мог использовать API истории, изменив нашу конфигурацию так, чтобы она выглядела так.

devServer: {
    inline: true,
    hot: true,
    stats: 'minimal',
    contentBase: __dirname,
    overlay: true,
    historyApiFallback: true
}

Теперь, если мы перейдем прямо к нашему маршруту Contact, все должно работать правильно :)

Заключение

Мы все сделали - мы успешно добавили vue-router в наш проект Vue3. Большинство других функций, таких как защита навигации, обработка прокрутки и тому подобное, работают в основном одинаково.

Вот ссылка на последний репозиторий Github из этого руководства. Это отличный шаблонный код, если вы хотите иметь vue-router в своей области тестирования Vue3.

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

Надеюсь, вы кое-что узнали и так же взволнованы, как я, чтобы начать опробовать некоторые новые функции в Vue3.

Удачного кодирования!

Если вы хотите узнать больше о Vue 3, скачайте мою бесплатную шпаргалку по Vue 3 с такими важными знаниями, как Composition API, синтаксис шаблона Vue 3 и обработка событий.

Примечание от JavaScript In Plain English: Мы всегда заинтересованы в содействии продвижению качественного контента. Если у вас есть статья, которую вы хотите отправить в JavaScript In Plain English, отправьте нам электронное письмо по адресу [email protected] с вашим именем пользователя Medium, и мы добавим вас в качестве автора.

Первый взгляд на Vue Router в Vue3