Навигация между представлениями в Vue с помощью Vue Router

После создания приложения в Vue вы часто захотите, чтобы оно состояло из нескольких представлений или страниц. Для этого необходимо использовать дополнительный пакет, известный как vue-router. Создать простое приложение Vue очень легко, поэтому в этом руководстве мы рассмотрим, как добавить vue-router в ваше новое приложение. Чтобы создать приложение, вам достаточно выполнить следующие команды:

npm i -g @vue/cli 
vue create my-app
Войти в полноэкранный режим Выйти из полноэкранного режима

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

vue add router
Войти в полноэкранный режим Выйти из полноэкранного режима

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

- public
--- favicon.ico
--- index.html
- src
--- assets
--- components
--- router
------ index.js
--- views
------ About.vue
------ Home.vue
--- App.vue
--- main.js
- package.json
- package-lock.json
Вход в полноэкранный режим Выход из полноэкранного режима

Как вы можете видеть, теперь у вас есть несколько новых файлов для роутера — и несколько изменений в существующих файлах. Например, в main.js ваше приложение будет использовать папку router, которая теперь создана. Файл index.js будет импортирован, как показано ниже:

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')
Вход в полноэкранный режим Выход из полноэкранного режима

Модификация маршрутизатора Vue

В файле /router/index.js вы найдете конфигурацию вашего маршрутизатора! Именно здесь вы можете настраивать страницы. По умолчанию ваш router выглядит примерно так:

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

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

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

Есть два способа добавления маршрутов, как показано выше. Вы можете импортировать с помощью функции import(), или import с помощью типичного оператора Javascript import. Каждый route состоит из 3 различных частей:

  • path, который является URL, на который пользователь сможет перейти.
  • name страницы, который является идентификатором страницы.
  • component для страницы. Это компонент, который появится, когда пользователь перейдет по пути.
{
    path: '/',
    name: 'Home',
    component: Home
}
Вход в полноэкранный режим Выход из полноэкранного режима

Чтобы добавить больше, вам просто нужно добавить больше в объект — так, ниже я добавил новую страницу под названием /contact-us, используя компонент, найденный в '../views/ContactUs.vue':


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

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/contact-us',
    name: 'ContactUs',
    component: () => import('../views/ContactUs.vue')
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

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

Динамическая маршрутизация с помощью Vue Router

Итак, это все хорошо, но что если конечная точка URL не статична? Например, /user/:id, где :id может быть чем угодно. К счастью, это тоже возможно, просто написав URL в таком формате — вам просто нужно написать /user/:id в свойстве path:

{
    path: '/user/:name',
    name: 'User',
    component: () => import('../views/User.vue')
}
Вход в полноэкранный режим Выход из полноэкранного режима

Формат согласования для vue-router знаком, если вы использовали express — и фактически любое согласование маршрута, которое вы можете сделать в express, вы можете сделать в vue-router.

Перенаправление с помощью Vue Router

Наконец, мы также можем настроить маршрут для перенаправления на другой маршрут. Это можно сделать с помощью свойства redirect. Например, приведенное ниже свойство перенаправит /home на /homepage:

{
    path: '/home',
    name: 'home',
    redirect: '/homepage'
}
Вход в полноэкранный режим Выйти из полноэкранного режима

Это также может быть определено как именованный маршрут. Ниже мы перенаправим /home на тот маршрут, который имеет имя about:

{
    path: '/home',
    name: 'home',
    redirect: { name: 'about' }
}
Войти в полноэкранный режим Выход из полноэкранного режима

И наконец, вы также можете определить это как функцию… что означает, что вы можете создать более сложную логику для обработки перенаправления:

{
    path: '/user/:id',
    name: 'home',
    redirect: (to) => {
        // to will contain information about the route
        // to.params.id will be whichever `id` is in the URL in /user/:id
    }
}
Войти в полноэкранный режим Выход из полноэкранного режима

Переход между страницами с помощью Vue Router

Теперь, когда мы определили наш маршрутизатор, мы захотим использовать его в нашем приложении. Вы можете заметить, что ваш файл App.vue немного изменился и содержит что-то вроде этого:

<template>
    <div id="nav">
        <router-link to="/">Home</router-link> |
        <router-link to="/about">About</router-link>
    </div>
    <router-view/>
</template>
Войти в полноэкранный режим Выйти из полноэкранного режима

Тег <router-link> можно использовать для легкой навигации между маршрутами, определенными в вашем файле router index.js. Тег <router-view> в конечном итоге будет содержать ваши маршруты, когда на них щелкнут. Каждый маршрут также будет содержать свой собственный <router-view>, что означает, что у вас могут быть вложенные маршруты. Все они могут быть определены в /routes/index.js. Например, здесь представлен вложенный маршрут, который содержит два потенциальных дочерних элемента, dashboard и posts:

const routes = [
    {
        path: '/user/:name',
        name: 'User',
        component: import('../views/User.vue'),
        children: [{
            path: 'dashboard',
            component: import('../views/Dashboard.vue'),
        },
        {
            path: 'posts',
            component: import('../views/Posts.vue'),
        }]
    }
]
Войти в полноэкранный режим Выход из полноэкранного режима

Теперь, поскольку мы определили дочерние компоненты, мы можем по-прежнему использовать путь /user/:name, но теперь у нас есть два дополнительных компонента, которые будут отображаться внутри User.vue, доступные через /user/:name/dashboard и /user/:name/posts соответственно. Таким образом, пока User отображается в App.vue <router-view>, dashboard и posts будут отображаться в User.vue версии <router-view>. Это выглядит примерно так:

┌ - - - - - - - - - - - - - - - - - - ┐
| App.vue                             |
| ┌ - - - - - - - - - - - - - - - - ┐ |
| | User.vue                        | | 
| | ┌ - - - - - - - ┐ ┌ - - - - - ┐ | |
| | | Dashboard.vue | | Posts.vue | | |
| | └ - - - - - - - ┘ └ - - - - - ┘ | |
| └ - - - - - - - - - - - - - - - - ┘ |
└ - - - - - - - - - - - - - - - - - - ┘
Вход в полноэкранный режим Выход из полноэкранного режима

Это означает, что компонент User.vue всегда будет виден при переходе к /user/:name, но компоненты Dashboard.vue и Posts.vue станут видимыми только при переходе к этим маршрутам!

Программная маршрутизация с помощью Vue Router

Подобно тому, как мы использовали <router-link>, мы можем программно перейти к маршруту с помощью router.push. <router-link to="/about"> можно написать на Javascript следующим образом:

router.push('/about')
Войти в полноэкранный режим Выйти из полноэкранного режима

Если мы хотим быть немного более продвинутыми, мы можем передать объект. Например, приведенная ниже команда программно перейдет к маршруту с именем name, определенным как About, и добавит строку запроса ?id=15 в конец. Если маршрут About имеет path /about, то URL, на который он будет перенаправлен, будет /about/?id=15:

router.push({ name: 'About', query: { id : 15 }})
Вход в полноэкранный режим Выйти из полноэкранного режима

Аналогично, тот же Javascript может быть представлен в HTML следующим образом:

<router-link to="{ name: 'About', query: { id : 15 }}">About</router-link>
Вход в полноэкранный режим Выйти из полноэкранного режима

Предотвращение кнопки «Назад» с помощью Vue Router

Хотя это добавит новую запись истории для пользователя, осуществляющего навигацию, мы также можем заменить текущую страницу для пользователя — это означает, что ни история, ни кнопка возврата на предыдущую страницу не будут доступны. Обычно это не рекомендуется, но в некоторых ситуациях может иметь ограниченное применение. Чтобы сделать это программно, мы можем использовать router.replace:

router.replace({ name: 'About', query: { id : 15 }})
Войти в полноэкранный режим Выйти из полноэкранного режима

Или в HTML добавьте атрибут replace:

<router-link to="{ name: 'About', query: { id : 15 }}" replace>About</router-link>
Войти в полноэкранный режим Выйти из полноэкранного режима

Заключение

Надеюсь, вам понравилось это руководство по началу работы с маршрутизатором vue. Роутеры в Vue — это неоценимая часть настройки нового приложения, они дают нам очень много гибкости в определении и создании страниц в Vue. Чтобы узнать больше о Vue, ознакомьтесь с другими моими руководствами.

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