Введение в Vue Router

Чтобы создать одностраничное приложение с помощью vue.js, мы должны добавить библиотеку маршрутизатора для маршрутизации URL (Uniform Resource Locators) к нашим компонентам.

Vue.js имеет свою собственную библиотеку маршрутизатора под названием vue-router, которая занимается маршрутизацией.

В этой статье мы рассмотрим, как использовать Vue Router в приложении vue.js.

Начало работы

Мы можем начать использовать Vue Router в нашем приложении Vue.js тремя способами:

  • Установив Vue Router напрямую или используя CDN (сеть доставки контента) в приложении Vue.

  • Добавление Vue Router в список зависимостей при настройке приложения Vue.js с помощью Vue CLI.

  • Установка Vue-Router с помощью NPM или yarn.

Важность Vue Router

Vue Router работает так же, как тег anchor( в HTML (HyperText Markup Language). Он отвечает за загрузку страниц, то есть вы можете использовать его для перехода с одной страницы на другую с помощью компонента router-link и router-view.

Создание одностраничного приложения с помощью Vue + Vue Router

Вы можете установить Vue Router непосредственно с CDN (Content Delivery Network) следующими способами:

  • Получите URL ссылки на CDN npm-base (https://unpkg.com/vue@3 и https://unpkg.com/vue-router@4) с сайта Vue Router.

  • Затем добавьте ссылку в тег script в нашем компоненте.

  • Затем сопоставьте наши компоненты с маршрутами и дайте Vue Router знать, где их рендерить.

  • Затем создайте файл javaScript (index.js), в который мы добавим наш код для компонентов маршрута и выполним маршрутизацию.

Чтобы сделать все то, о чем говорилось выше, мы напишем следующий код:

Index.html

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

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- use the router-link component for navigation. -->
    <!-- specify the link by passing the `to` prop. 

## 
-->
    <!-- `<router-link>` will render an `<a>` tag with the correct `href` attribute -->
    <router-link to="/">Go to Home</router-link>
    <router-link to="/about">Go to About</router-link>
  </p>
  <!-- route outlet -->
  <!-- component matched by the route will render here -->
  <router-view></router-view>
</div>
Вход в полноэкранный режим Выйти из полноэкранного режима

В приведенном выше коде у нас есть теги script, которые используются для ссылки на пакеты Vue и Vue Router, затем у нас есть тег div с атрибутом id, который установлен на app.

router-view
router-view — это компонент, который поставляется с Vue Router, router-view используется для отображения нашего контента внутри тега div или компонента, соответствующего url.

router-link

router-link также является компонентом, поставляемым с Vue Router, router-link работает как тег anchor. router-link поставляется со свойством to (prop) для передачи пути или адреса URL, на который мы хотим, чтобы переходили ссылки. router-link используется для создания ссылок. Это позволяет Vue Router изменять URL без перезагрузки страницы. Вы можете поместить его в любое место макета.

Index.js(javascript file)
Наконец, у нас есть файл index.js.

/ 1. Define route components.
// These can be imported from other files
const Home = { template: '<div>Home</div>' }
const About = { template: '<div>About</div>' }

// 2. Define some routes
// Each route should map to a component.
// We'll talk about nested routes later.
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
]

// 3. Create the router instance and pass the `routes` option
// You can pass in additional options here, but let's
// keep it simple for now.
const router = VueRouter.createRouter({
  // 4. Provide the history implementation to use. We are using the hash history for simplicity here.
  history: VueRouter.createWebHashHistory(),
  routes, // short for `routes: routes`
})

// 5. Create and mount the root instance.
const app = Vue.createApp({})
// Make sure to _use_ the router instance to make the
// whole app router-aware.
app.use(router)

app.mount('#app')

// Now the app has started!
Вход в полноэкранный режим Выход из полноэкранного режима

В приведенном выше коде у нас есть маршруты Home и About для отображения страниц home и about соответственно.
Затем мы используем массив routes для сопоставления компонентов с путями, к которым мы хотим привязать маршруты.
Далее мы создали новый экземпляр VueRouter с объектом, в котором содержатся наши маршруты и история.

Добавление Vue Router в зависимости при настройке приложения Vue.js с помощью Vue CLI

Вы можете добавить Vue Router в ваше приложение Vue во время установки Vue с помощью Vue CLI следующим образом:

  1. Запустите команду «vue create project-name» в терминале. Вам будет предложено выбрать предварительную настройку.
  2. Выберите manually select features, чтобы выбрать Router. Вам будет предложено выбрать версию Vue, которую вы хотите использовать, затем выбрать любую, после чего вам снова будет предложено ответить да или нет на следующий вопрос:Use history mode for router? (Требуется правильная настройка сервера для отката индекса в продакшене) (y/n).
  3. Введите y, если вам нужен режим истории, иначе введите n, если он вам не нужен. Вам будет предложено выбрать другие функции.
  4. Используйте клавишу ввода для выбора следующих предложенных функций.
  5. Введите y или n на этот вопрос (Сохранить это как предустановку для будущих проектов?). Если вы введете y, в конце подсказки у вас будет возможность сохранить выбранные вами функции как предустановку, чтобы вы могли использовать их в будущем, если вы введете n, вы не сможете использовать предустановку в будущем.

После завершения всех описанных выше шагов по установке Vue и Vue Router с помощью Vue CLI, Vue Router будет установлен автоматически, при этом внутри проекта vue будет создана папка router, а внутри папки будет файл (index.js) для маршрутизатора, после чего вы сможете начать использовать router-link и router-view.

Установка Vue-Router с помощью NPM или yarn

Вы можете установить Vue Router с помощью NPM или yarn, выполнив этот код:

  • Запустите npm install vue-router@4 в терминале, если вы хотите установить Vue Router с помощью NPM.

  • Запустите yarn add vue-router@4 в терминале, если вы хотите установить Vue Router с помощью yarn.

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

Динамическое соответствие маршрута — это когда несколько маршрутов используют один и тот же компонент. Например, когда у нас много фильмов с разными id и мы хотим показать профиль пользователя, компонент профиля пользователя — это компонент, который будет использоваться всеми пользователями для просмотра их профиля.

Динамическое соответствие маршрута может быть сделано путем сопоставления маршрута с заданным шаблоном с теми же компонентами с params и url будет выглядеть следующим образом /users/1. Например, у нас может быть компонент movie, который должен быть отображен для всех пользователей, но с разными ID. это шаблон того, как сделать динамический маршрут:

app.mount('#app');
const User = {
  template: '<div>User</div>',
}

// these are passed to `createRouter`
const routes = [
  // dynamic segments start with a colon
  { path: '/users/:id', component: User },
]

Вход в полноэкранный режим Выход из полноэкранного режима

Чтобы добавить параметр к пути маршрута, параметр обозначается двоеточием :. Когда маршрут будет найден, значение его параметров будет отображено как this.$route.params в каждом компоненте.
Таким образом, мы можем отобразить каждый фильм, обновив шаблон фильма на этот:

const User = {
  template: '<div>User {{ $route.params.id }}</div>',
}
Вход в полноэкранный режим Выйти из полноэкранного режима

Маршрут с параметрами позволяет пользователям переходить от /user/1 к /user/2, при этом один и тот же экземпляр компонента будет использоваться повторно, поскольку оба маршрута используют один и тот же компонент.

Оцените статью
devanswers.ru
Добавить комментарий