Навигация между представлениями в Vue.js с помощью 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 ваше приложение будет использовать только что созданную папку маршрутизатора. Файл 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.

{
    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> можно использовать для удобной навигации между маршрутами, определенными в файле маршрутизатора 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 router. Маршрутизаторы в Vue являются бесценной частью настройки нового приложения и дают нам большую гибкость для определения и создания страниц в Vue. Чтобы узнать больше о Vue, ознакомьтесь с другими моими руководствами.